easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-tabs.js

@@ -1,503 +1,512 @@
-var K = Object.defineProperty;
-var j = (i) => {
-  throw TypeError(i);
+import { E as A } from "../core/EaBase.ts.js";
+import { q as _, a as c, l as d, C } from "../core/decorator.js";
+import { E as y } from "../utils/Enum.ts.js";
+import { s as B } from "../css/ea-tab.style.js";
+import "./ea-icon.js";
+import { c as x } from "../utils/bem.ts.js";
+import { R } from "../utils/roving-tabindex.ts.js";
+import { s as O } from "../css/ea-tabs.style.js";
+import { s as N } from "../css/ea-tab-panel.style.js";
+var z = Object.defineProperty, I = Object.getOwnPropertyDescriptor, b = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? I(e, s) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (i = (a ? r(e, s, i) : r(i)) || i);
+  return a && i && z(e, s, i), i;
 };
-var Q = (i, o, t) => o in i ? K(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
-var q = (i, o, t) => Q(i, typeof o != "symbol" ? o + "" : o, t), F = (i, o, t) => o.has(i) || j("Cannot " + t);
-var e = (i, o, t) => (F(i, o, "read from private field"), t ? t.call(i) : o.get(i)), a = (i, o, t) => o.has(i) ? j("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(i) : o.set(i, t), h = (i, o, t, s) => (F(i, o, "write to private field"), s ? s.call(i, t) : o.set(i, t), t);
-import { B as U } from "./Base.js";
-import { s as X } from "../css/ea-tab.style.js";
-import { s as Y } from "../css/ea-tabs.style.js";
-import { t as G } from "../utils/timeout.js";
-import { s as Z } from "../css/ea-tab-panel.style.js";
-var d, v, _, S, p, x;
-class V extends U {
+const S = "ea-tab", T = x(S);
+let h = class extends A {
   constructor() {
-    super();
-    a(this, d);
-    /** @type {HTMLElement} */
-    a(this, _);
-    /** @type {HTMLElement} */
-    a(this, S);
-    /** @type {AbortController} */
-    a(this, p, new AbortController());
-    q(this, "state", this.properties({
-      panel: {
-        type: String,
-        default: "",
-        observer: () => {
-        }
-      },
-      type: {
-        type: ["", "card", "border-card"],
-        default: () => {
-          var t;
-          return ((t = e(this, d, v)) == null ? void 0 : t.getAttribute("type")) || "";
-        },
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      active: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "tab-position": {
-        type: ["", "card", "border-card"],
-        default: () => {
-          var t;
-          return ((t = e(this, d, v)) == null ? void 0 : t.getAttribute("tab-position")) || "top";
-        },
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      editable: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      closable: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 关闭事件，为了避免click事件优先触发。
-     * @param {MouseEvent} e
-     */
-    a(this, x, (t) => {
-      t.preventDefault(), t.stopImmediatePropagation(), this.emit("ea-tab-close-icon-click", {
-        detail: {
-          panel: this.panel
-        },
-        bubbles: !0
-      });
-    });
-    this.stylesheet = X, this.$render();
+    super(...arguments), this._uniqueId = h._instanceCount++, this.panel = "", this.type = "", this.disabled = !1, this.active = !1, this.tabPosition = "top", this.editable = !1, this.closable = !1;
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "panel",
-      "type",
-      "disabled",
-      "active",
-      "tab-position",
-      "editable",
-      "closable"
-    ];
+  get _hostTabsContext() {
+    try {
+      return this.closest("ea-tabs");
+    } catch {
+      return null;
+    }
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    var l, n, c;
-    let t = (l = e(this, d, v)) == null ? void 0 : l.querySelectorAll("ea-tab");
-    t = (t == null ? void 0 : t.length) > 0 ? [...t] : [];
-    const s = this.computedClasslist(
-      "ea-tab",
+    var s;
+    const t = this._hostTabsContext ? [...this._hostTabsContext.querySelectorAll("ea-tab")] : [], e = T(
       {
-        ["--" + this.type]: this.type === ((n = e(this, d, v)) == null ? void 0 : n.getAttribute("type")) || "",
-        ["--" + this["tab-position"]]: this["tab-position"] === ((c = e(this, d, v)) == null ? void 0 : c.getAttribute("tab-position")) || "top"
+        [this.type]: this.type === ((s = this._hostTabsContext) == null ? void 0 : s.getAttribute("type")) || "",
+        [this.tabPosition]: !0
       },
       {
         disabled: this.disabled,
         active: this.active,
         last: t.slice(-1)[0] === this,
-        first: t.slice(0)[0] === this,
+        first: t[0] === this,
         closable: this.closable ? this.closable : this.editable
       }
     );
-    return e(this, _).className = s, s;
+    return this._container && (this._container.className = e), e;
+  }
+  /** 设置 ARIA 属性，遵循 W3C tabs 模式。 */
+  _setupAria() {
+    this._container.setAttribute("role", "tab"), this.panel && this._container.setAttribute("aria-controls", `ea-tab-panel-${this.panel}`), this._container.id = `ea-tab-${this._uniqueId}`, this.id = `ea-tab-${this._uniqueId}`;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tab' part='container'>
+  html() {
+    return `
+      <div class='${T()}' part='container'>
         <slot></slot>
-        <ea-icon class="ea-tab__close-icon" name="xmark" part="close-icon"></ea-icon>
+        <ea-icon class="${T.e("close-icon")}" name="xmark" part="close-icon"></ea-icon>
       </div>
-    `, h(this, _, this.shadowRoot.querySelector(".ea-tab")), h(this, S, this.shadowRoot.querySelector(".ea-tab__close-icon")), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = e(this, p)) == null || t.abort(), h(this, p, new AbortController()), e(this, S).addEventListener("click", e(this, x), {
-      signal: e(this, p).signal
+  _handleCloseIconClick(t) {
+    t.preventDefault(), t.stopImmediatePropagation(), this.emit("ea-tab-close-icon-click", {
+      detail: {
+        panel: this.panel
+      },
+      bubbles: !0
     });
   }
-  $beforeUnmounted() {
-    e(this, p).abort();
+  $mount() {
+    this.updateContainerClasslist(), this._setupAria();
+  }
+};
+h._instanceCount = 0;
+b([
+  _(".ea-tab")
+], h.prototype, "_container", 2);
+b([
+  c({
+    type: String,
+    default: ""
+  })
+], h.prototype, "panel", 2);
+b([
+  c({
+    type: y(["", "card", "border-card"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], h.prototype, "type", 2);
+b([
+  c({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], h.prototype, "disabled", 2);
+b([
+  c({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-selected",
+      target: ".ea-tab",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], h.prototype, "active", 2);
+b([
+  c({
+    type: String,
+    default: "top",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], h.prototype, "tabPosition", 2);
+b([
+  c({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], h.prototype, "editable", 2);
+b([
+  c({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], h.prototype, "closable", 2);
+b([
+  d("click", ".ea-tab__close-icon")
+], h.prototype, "_handleCloseIconClick", 1);
+h = b([
+  C(S, { styles: [B] })
+], h);
+class D extends Event {
+  constructor(e) {
+    super("ea-tab-click", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = e;
+  }
+}
+class $ extends Event {
+  constructor(e) {
+    super("ea-tab-remove", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = e;
   }
 }
-d = new WeakSet(), v = function() {
-  try {
-    return this.closest("ea-tabs");
-  } catch {
-    return null;
+class H extends Event {
+  constructor(e) {
+    super("ea-tabs-change", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = e;
   }
-}, _ = new WeakMap(), S = new WeakMap(), p = new WeakMap(), x = new WeakMap();
-window.customElements.get("ea-tab") || window.customElements.define("ea-tab", V);
-var E, u, f, r, m, g, L, k, y, b, C, $, N, A, B, H, w, P, I, W, O;
-class tt extends U {
+}
+var W = Object.defineProperty, j = Object.getOwnPropertyDescriptor, l = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? j(e, s) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (i = (a ? r(e, s, i) : r(i)) || i);
+  return a && i && W(e, s, i), i;
+};
+const w = "ea-tabs", p = x(w);
+let n = class extends A {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    a(this, E);
-    /** @type {HTMLElement} */
-    a(this, u);
-    /** @type {HTMLElement} */
-    a(this, f);
-    /** @type {HTMLElement} */
-    a(this, r);
-    /** @type {HTMLSlotElement} */
-    a(this, m);
-    /** @type {HTMLElement} */
-    a(this, g);
-    /** @type {HTMLElement} */
-    a(this, L);
-    /** @type {HTMLElement} */
-    a(this, k);
-    /** @type {HTMLSlotElement} */
-    a(this, y);
-    /** @type {AbortController} */
-    a(this, b, new AbortController());
-    /** @type {ResizeObserver} */
-    a(this, C);
-    q(this, "state", this.properties({
-      type: {
-        type: ["", "card", "border-card"],
-        default: "",
-        observer: (t) => {
-          this.updateContainerClasslist(), [...e(this, y).assignedElements()].filter(
-            (s) => s.tagName.toLowerCase() === "ea-tab-panel" || s.tagName.toLowerCase() === "ea-tab"
-          ).forEach((s) => s.setAttribute("type", t));
-        }
-      },
-      active: {
-        type: String,
-        default: () => {
-          const t = this.getAttribute("active");
-          if (t)
-            return t;
-          {
-            const s = this.querySelector("ea-tab");
-            return s ? s.getAttribute("panel") : "";
-          }
-        },
-        observer: (t) => {
-          e(this, A).call(this, t), this.emit("tabs-change", {
-            name: t
-          });
-        }
-      },
-      "tab-position": {
-        type: ["top", "bottom", "left", "right"],
-        default: "top",
-        observer: (t) => {
-          this.updateContainerClasslist(), e(this, H).call(this, t), e(this, A).call(this, this.active), [...e(this, m).assignedElements()].filter(
-            (s) => s.tagName.toLowerCase() === "ea-tab-panel" || s.tagName.toLowerCase() === "ea-tab"
-          ).forEach((s) => s.setAttribute("tab-position", t));
-        }
-      },
-      editable: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      }
-    }));
-    /**
-     * 更新指示器位置
-     * @param {HTMLElement} tabEl
-     * @param {HTMLElement} lineEl
-     * @param {HTMLElement} tabPosition
-     */
-    a(this, $, (t, s = e(this, g), l = this["tab-position"]) => {
-      const n = l === "top" || l === "bottom", c = t.getBoundingClientRect(), T = s.getBoundingClientRect();
+    super(...arguments), this.type = "", this.active = "", this.tabPosition = "top", this.editable = !1, this._updateIndicatorPosition = (t, e = this._line, s = this.tabPosition) => {
+      if (!e) return;
+      const a = s === "top" || s === "bottom", i = t.getBoundingClientRect(), o = e.getBoundingClientRect();
       this.style.setProperty(
         "--ea-tabs-indicator-size",
-        `${n ? t.offsetWidth : t.offsetHeight}px`
+        `${a ? t.offsetWidth : t.offsetHeight}px`
       ), this.style.setProperty(
         "--ea-tabs-indicator-x",
-        `${n ? c.x - T.x : c.y - T.y}px`
+        `${a ? i.x - o.x : i.y - o.y}px`
       );
-    });
-    /**
-     * 更新指示器位置
-     * @param {HTMLElement} tabEl
-     * @param {HTMLElement} [lineEl]
-     * @param {HTMLElement} [tabPosition]
-     */
-    a(this, N, (t, s = e(this, g), l = this["tab-position"]) => {
-      const n = t.getBoundingClientRect();
-      e(this, r).scrollTo({
-        left: t.offsetLeft + n.width,
-        top: t.offsetTop + n.height,
+    }, this._updateNavPosition = (t) => {
+      if (!this._nav) return;
+      const e = t.getBoundingClientRect(), s = this.tabPosition === "left" || this.tabPosition === "right";
+      let a, i;
+      if (s) {
+        const o = this._nav.scrollTop, r = o + this._nav.clientHeight, u = t.offsetTop, f = u + e.height;
+        a = u >= o && f <= r, i = u - this._nav.clientHeight / 2 + e.height / 2;
+      } else {
+        const o = this._nav.scrollLeft, r = o + this._nav.clientWidth, u = t.offsetLeft, f = u + e.width;
+        a = u >= o && f <= r, i = u - this._nav.clientWidth / 2 + e.width / 2;
+      }
+      a || (s ? this._nav.scrollTo({
+        top: Math.max(0, i),
         behavior: "smooth"
-      });
-    });
-    /**
-     * 更新 tab 激活状态
-     * @param {String} activeName
-     */
-    a(this, A, (t = this.active) => {
-      const s = [...this.querySelectorAll("ea-tab-panel")];
-      [...this.querySelectorAll("ea-tab")].forEach((n) => {
-        const c = n.getAttribute("panel") === t;
-        n.toggleAttribute("active", c), c && this.type === "" && e(this, $).call(this, n), c && e(this, N).call(this, n);
-      }), s.forEach((n) => {
-        n.toggleAttribute(
+      }) : this._nav.scrollTo({
+        left: Math.max(0, i),
+        behavior: "smooth"
+      }));
+    }, this._updateTabsActive = (t = this.active) => {
+      const e = [...this.querySelectorAll("ea-tab-panel")];
+      [...this.querySelectorAll("ea-tab")].forEach((a) => {
+        const i = a.getAttribute("panel") === t;
+        a.toggleAttribute("active", i), i && this.type === "" && this._updateIndicatorPosition(a), i && this._updateNavPosition(a);
+      }), e.forEach((a) => {
+        a.toggleAttribute(
           "active",
-          t === n.getAttribute("name")
-        );
-      });
-    });
-    /**
-     * 更新 tab 是否为可编辑状态
-     * @param {Boolean} isEditable
-     */
-    a(this, B, (t = this.editable) => {
-      this.querySelectorAll("ea-tab").forEach((s) => {
-        s.toggleAttribute("editable", t);
-      });
-    });
-    /**
-     * @param {"top" | "bottom" | "left" | "right"} tabPosition
-     */
-    a(this, H, (t = this["tab-position"]) => {
-      t === "left" || t === "right" ? (e(this, u).setAttribute("name", "arrow-left"), e(this, f).setAttribute("name", "arrow-right")) : (t === "top" || t === "bottom") && (e(this, u).setAttribute("name", "arrow-up"), e(this, f).setAttribute("name", "arrow-down"));
-    });
-    /**
-     * 当 tab slot 内容变化时触发
-     * @param {Event} e
-     */
-    a(this, w, () => {
-      [...this.querySelectorAll("ea-tab")].forEach((s) => {
-        s.setAttribute("slot", "nav");
-        try {
-          s.updateContainerClasslist();
-        } catch {
-        }
-      }), e(this, A).call(this, this.active), e(this, B).call(this, this.editable), this.updateContainerClasslist(), G(() => {
-        const s = [...this.querySelectorAll("ea-tab")].find(
-          (n) => n.hasAttribute("active")
+          t === a.getAttribute("name")
         );
-        if (!s) return;
-        const l = s.getBoundingClientRect();
-        e(this, r).scrollTo({
-          left: s.offsetLeft + l.width,
-          top: s.offsetTop + l.height,
-          behavior: "smooth"
-        });
-      }, 0);
-    });
-    /**
-     * 标签切换事件
-     * @param {MouseEvent} e
-     */
-    a(this, P, (t) => {
-      const s = t.target.closest("ea-tab");
-      if (!s || s != null && s.hasAttribute("disabled")) return;
-      const l = s.getAttribute("panel");
-      this.active = l, this.emit("tab-click", {
-        detail: {
-          name: l,
-          panel: this.querySelector(`ea-tab-panel[name="${l}"]`)
-        },
-        bubbles: !0
       });
-    });
-    /**
-     * 滚动至上一视口
-     */
-    a(this, I, () => {
-      e(this, r).scrollTo({
-        left: e(this, r).scrollLeft - e(this, r).offsetWidth,
-        top: e(this, r).scrollTop - e(this, r).offsetHeight,
-        behavior: "smooth"
+    }, this._updateTabEditable = (t = this.editable) => {
+      this.querySelectorAll("ea-tab").forEach((e) => {
+        e.toggleAttribute("editable", t);
       });
-    });
-    /**
-     * 滚动至下一视口
-     */
-    a(this, W, () => {
-      e(this, r).scrollTo({
-        left: e(this, r).scrollLeft + e(this, r).offsetWidth,
-        top: e(this, r).scrollTop + e(this, r).offsetHeight,
-        behavior: "smooth"
-      });
-    });
-    /**
-     * 删除标签
-     * @param {CustomEvent} e
-     */
-    a(this, O, (t) => {
-      t.preventDefault(), t.stopImmediatePropagation();
-      const s = t.detail.panel, l = [...this.querySelectorAll("ea-tab")], n = t.target, c = l.indexOf(n), T = this.querySelector(`ea-tab-panel[name="${s}"]`), D = [...this.querySelectorAll("ea-tab")][c - 1 < 0 ? 0 : c - 1].getAttribute("panel");
-      this.setAttribute("active", D), T.remove(), n.remove(), this.emit("tab-remove", {
-        detail: {
-          name: D
-        }
-      });
-    });
-    this.stylesheet = Y, this.$render();
+    }, this._updateTabNavigationPosition = (t = this.tabPosition) => {
+      !this._prevBtn || !this._nextBtn || (t === "left" || t === "right" ? (this._prevBtn.setAttribute("name", "arrow-left"), this._nextBtn.setAttribute("name", "arrow-right")) : (t === "top" || t === "bottom") && (this._prevBtn.setAttribute("name", "arrow-up"), this._nextBtn.setAttribute("name", "arrow-down")));
+    };
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "type",
-      "active",
-      "tab-position",
-      "editable"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const t = e(this, r).scrollWidth > e(this, r).clientWidth || e(this, r).scrollHeight > e(this, r).clientHeight, s = this.computedClasslist(
-      "ea-tabs",
-      {
-        ["--" + this.type]: this.type,
-        ["--" + this["tab-position"]]: this["tab-position"]
-      },
-      {
-        overflow: t
-      }
+    if (!this._nav || !this._container) return "";
+    const t = this._nav.scrollWidth > this._nav.clientWidth || this._nav.scrollHeight > this._nav.clientHeight, e = p(
+      { [this.type]: !!this.type, [this.tabPosition]: !0 },
+      { overflow: t }
     );
-    return e(this, E).className = s, s;
+    return this._container.className = e, e;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tabs' part='container'>
-        <nav class='ea-tabs__nav' part='nav'>
-            <ea-icon name="angle-left" class="ea-tabs__prev ea-tabs__scroll" part='prev'></ea-icon>
+  html() {
+    return `
+      <div class='${p()}' part='container'>
+        <nav class='${p.e("nav")}' part='nav'>
+            <ea-icon name="angle-left" class="${p.e("prev")} ${p.e("scroll")}" part='prev'></ea-icon>
             <slot name='nav'></slot>
-            <ea-icon name="angle-right" class="ea-tabs__next ea-tabs__scroll" part='next'></ea-icon>
+            <ea-icon name="angle-right" class="${p.e("next")} ${p.e("scroll")}" part='next'></ea-icon>
         </nav>
-        <div class="ea-tabs__line" part="line" tabindex="-1">
-            <span class="ea-tabs__indicator" part="indicator"></span>
+        <div class="${p.e("line")}" part="line" tabindex="-1">
+            <span class="${p.e("indicator")}" part="indicator"></span>
         </div>
-        <main class='ea-tabs__content' part='content'>
+        <div class='${p.e("content")}' part='content'>
           <slot></slot>
-        </main>
+        </div>
       </div>
-    `, h(this, E, this.shadowRoot.querySelector(".ea-tabs")), h(this, u, this.shadowRoot.querySelector(".ea-tabs__prev")), h(this, f, this.shadowRoot.querySelector(".ea-tabs__next")), h(this, r, this.shadowRoot.querySelector(".ea-tabs__nav")), h(this, m, this.shadowRoot.querySelector(
-      ".ea-tabs__nav > slot[name=nav]"
-    )), h(this, g, this.shadowRoot.querySelector(".ea-tabs__line")), h(this, L, this.shadowRoot.querySelector(".ea-tabs__indicator")), h(this, k, this.shadowRoot.querySelector(".ea-tabs__content")), h(this, y, this.shadowRoot.querySelector(
-      ".ea-tabs__content > slot"
-    )), e(this, w).call(this);
+    `;
   }
-  connectedCallback() {
-    var t, s;
-    super.connectedCallback(), (t = e(this, b)) == null || t.abort(), h(this, b, new AbortController()), (s = e(this, C)) == null || s.unobserve(), e(this, r).addEventListener("click", e(this, P), {
-      signal: e(this, b).signal
-    }), e(this, m).addEventListener("slotchange", e(this, w), {
-      signal: e(this, b).signal
-    }), e(this, y).addEventListener("slotchange", e(this, w), {
-      signal: e(this, b).signal
-    }), e(this, u).addEventListener("click", e(this, I), {
-      signal: e(this, b).signal
-    }), e(this, f).addEventListener("click", e(this, W), {
-      signal: e(this, b).signal
-    }), this.addEventListener("ea-tab-close-icon-click", e(this, O), {
-      signal: e(this, b).signal
-    }), h(this, C, new ResizeObserver(() => {
-      this.updateContainerClasslist();
-    }).observe(e(this, r))), G(() => {
-      this.updateContainerClasslist();
-    }, 100);
+  _onSlotChange() {
+    this._slotChangeTimer && clearTimeout(this._slotChangeTimer), this._slotChangeTimer = window.setTimeout(() => {
+      this._slotChangeTimer = void 0, requestAnimationFrame(() => {
+        this._handleSlotChange();
+      });
+    }, 16);
   }
-  $beforeUnmounted() {
-    var t, s;
-    (t = e(this, b)) == null || t.abort(), (s = e(this, C)) == null || s.unobserve();
+  /**
+   * 处理 slot 变化逻辑
+   */
+  _handleSlotChange() {
+    const t = [...this.querySelectorAll("ea-tab")], e = [...this.querySelectorAll("ea-tab-panel")];
+    t.forEach((s) => {
+      s.setAttribute("slot", "nav"), this.type && s.setAttribute("type", this.type), s.setAttribute("tab-position", this.tabPosition);
+    }), e.forEach((s) => {
+      this.type && s.setAttribute("type", this.type), s.setAttribute("tab-position", this.tabPosition);
+    }), this._updateTabsActive(this.active), this._updateTabEditable(this.editable), this.updateContainerClasslist();
   }
-}
-E = new WeakMap(), u = new WeakMap(), f = new WeakMap(), r = new WeakMap(), m = new WeakMap(), g = new WeakMap(), L = new WeakMap(), k = new WeakMap(), y = new WeakMap(), b = new WeakMap(), C = new WeakMap(), $ = new WeakMap(), N = new WeakMap(), A = new WeakMap(), B = new WeakMap(), H = new WeakMap(), w = new WeakMap(), P = new WeakMap(), I = new WeakMap(), W = new WeakMap(), O = new WeakMap();
-window.customElements.get("ea-tabs") || window.customElements.define("ea-tabs", tt);
-var z, J, R, M;
-class et extends U {
-  constructor() {
-    super();
-    a(this, z);
-    /** @type {HTMLElement} */
-    a(this, R);
-    /** @type {AbortController} */
-    a(this, M, new AbortController());
-    q(this, "state", this.properties({
-      name: {
-        type: String,
-        default: "",
-        observer: () => {
-        }
-      },
-      type: {
-        type: ["", "card", "border-card"],
-        default: () => {
-          var t;
-          return ((t = e(this, z, J)) == null ? void 0 : t.getAttribute("type")) || "";
-        },
-        observer: () => {
-          this.updateContainerClasslist();
+  _handleTabClick(t) {
+    const e = t.target.closest("ea-tab");
+    if (!e || e != null && e.hasAttribute("disabled")) return;
+    const s = e.getAttribute("panel") || "";
+    this.active = s, this.dispatchEvent(
+      new D({
+        name: s,
+        panel: this.querySelector(`ea-tab-panel[name="${s}"]`)
+      })
+    );
+  }
+  _handlePrev() {
+    this._nav.scrollTo({
+      left: this._nav.scrollLeft - this._nav.offsetWidth,
+      top: this._nav.scrollTop - this._nav.offsetHeight,
+      behavior: "smooth"
+    });
+  }
+  _handleNext() {
+    this._nav.scrollTo({
+      left: this._nav.scrollLeft + this._nav.offsetWidth,
+      top: this._nav.scrollTop + this._nav.offsetHeight,
+      behavior: "smooth"
+    });
+  }
+  _handleTabRemove(t) {
+    t.preventDefault(), t.stopImmediatePropagation();
+    const e = t, s = e.detail.panel, a = [...this.querySelectorAll("ea-tab")], i = e.target, o = a.indexOf(i), r = this.querySelector(
+      `ea-tab-panel[name="${s}"]`
+    ), u = s === this.active;
+    if (r.remove(), i.remove(), u) {
+      const f = [...this.querySelectorAll("ea-tab")], g = f[o - 1] || f[0], E = (g == null ? void 0 : g.getAttribute("panel")) || "";
+      this.setAttribute("active", E), this.dispatchEvent(new $({ name: E }));
+    } else
+      this.dispatchEvent(new $({ name: this.active }));
+  }
+  $mount() {
+    if (this.setAttribute("role", "tablist"), !this.active) {
+      const t = this.getAttribute("active");
+      if (t)
+        this.active = t;
+      else {
+        const e = this.querySelector("ea-tab");
+        e && (this.active = e.getAttribute("panel") || "");
+      }
+    }
+    this.updateContainerClasslist(), this._nav && (this._resizeObserver = new ResizeObserver(() => {
+      this._resizeTimer && clearTimeout(this._resizeTimer), this._resizeTimer = window.setTimeout(() => {
+        this._resizeTimer = void 0, this.updateContainerClasslist();
+      }, 16);
+    }), this._resizeObserver.observe(this._nav)), this._initRovingTabindex();
+  }
+  /** 初始化键盘导航 */
+  _initRovingTabindex() {
+    const t = this.tabPosition === "left" || this.tabPosition === "right", e = [...this.querySelectorAll("ea-tab")];
+    this._rovingTabindex = new R({
+      orientation: t ? "vertical" : "horizontal",
+      loop: !0,
+      onActivate: (s) => {
+        const a = e[s];
+        if (a && !a.hasAttribute("disabled")) {
+          const i = a.getAttribute("panel") || "";
+          this.active = i;
         }
       }
-    }));
-    this.stylesheet = Z, this.$render();
+    }), this._rovingTabindex.setItems(e), this._syncRovingTabindex(this.active);
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "name", "type"];
+  /** 同步 RovingTabindex 的当前索引与 active 属性 */
+  _syncRovingTabindex(t) {
+    if (!this._rovingTabindex || !t) return;
+    const s = [...this.querySelectorAll("ea-tab")].findIndex((a) => a.getAttribute("panel") === t);
+    s >= 0 && this._rovingTabindex.setCurrentIndex(s);
+  }
+  _handleNavKeydown(t) {
+    var e;
+    (e = this._rovingTabindex) == null || e.handleKeydown(t);
+  }
+  $beforeUnmount() {
+    var t, e;
+    this._slotChangeTimer && (clearTimeout(this._slotChangeTimer), this._slotChangeTimer = void 0), this._resizeTimer && (clearTimeout(this._resizeTimer), this._resizeTimer = void 0), (t = this._resizeObserver) == null || t.disconnect(), this._resizeObserver = void 0, (e = this._rovingTabindex) == null || e.destroy(), this._rovingTabindex = void 0;
+  }
+};
+l([
+  _(".ea-tabs")
+], n.prototype, "_container", 2);
+l([
+  _(".ea-tabs__prev")
+], n.prototype, "_prevBtn", 2);
+l([
+  _(".ea-tabs__next")
+], n.prototype, "_nextBtn", 2);
+l([
+  _(".ea-tabs__nav")
+], n.prototype, "_nav", 2);
+l([
+  _(".ea-tabs__line")
+], n.prototype, "_line", 2);
+l([
+  c({
+    type: y(["", "card", "border-card"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this.querySelectorAll("ea-tab").forEach((t) => {
+        t.setAttribute("type", this.type);
+      }), this.querySelectorAll("ea-tab-panel").forEach((t) => {
+        t.setAttribute("type", this.type);
+      });
+    }
+  })
+], n.prototype, "type", 2);
+l([
+  c({
+    type: String,
+    default: "",
+    observer(t) {
+      this._updateTabsActive(t), this._syncRovingTabindex(t), this.dispatchEvent(new H({ name: t }));
+    }
+  })
+], n.prototype, "active", 2);
+l([
+  c({
+    type: y(["top", "bottom", "left", "right"]),
+    default: "top",
+    a11y: {
+      ariaAttr: "aria-orientation",
+      map: (t) => t === "left" || t === "right" ? "vertical" : "horizontal"
+    },
+    observer(t) {
+      this.updateContainerClasslist(), this._updateTabNavigationPosition(t), this._updateTabsActive(this.active), this.querySelectorAll("ea-tab").forEach((e) => {
+        e.setAttribute("tab-position", t);
+      }), this.querySelectorAll("ea-tab-panel").forEach((e) => {
+        e.setAttribute("tab-position", t);
+      });
+    }
+  })
+], n.prototype, "tabPosition", 2);
+l([
+  c({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._updateTabEditable(t);
+    }
+  })
+], n.prototype, "editable", 2);
+l([
+  d("slotchange", 'slot[name="nav"]'),
+  d("slotchange", ".ea-tabs__content > slot")
+], n.prototype, "_onSlotChange", 1);
+l([
+  d("click", ".ea-tabs__nav")
+], n.prototype, "_handleTabClick", 1);
+l([
+  d("click", ".ea-tabs__prev")
+], n.prototype, "_handlePrev", 1);
+l([
+  d("click", ".ea-tabs__next")
+], n.prototype, "_handleNext", 1);
+l([
+  d("ea-tab-close-icon-click")
+], n.prototype, "_handleTabRemove", 1);
+l([
+  d("keydown", ".ea-tabs__nav")
+], n.prototype, "_handleNavKeydown", 1);
+n = l([
+  C(w, { styles: [O] })
+], n);
+var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, m = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? M(e, s) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (i = (a ? r(e, s, i) : r(i)) || i);
+  return a && i && L(e, s, i), i;
+};
+const q = "ea-tab-panel", P = x(q);
+let v = class extends A {
+  constructor() {
+    super(...arguments), this.name = "", this.type = "", this.active = !1;
+  }
+  get _hostTabsContext() {
+    try {
+      return this.closest("ea-tabs");
+    } catch {
+      return null;
+    }
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const t = this.computedClasslist("ea-tab-panel", {
-      ["--" + this.type]: this.type
-    });
-    return e(this, R).className = t, t;
+    const t = P({ [this.type]: !!this.type });
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tab-panel' part='container'>
+  html() {
+    return `
+      <div class='${P()}' part='container'>
         <slot></slot>
       </div>
-    `, h(this, R, this.shadowRoot.querySelector(".ea-tab-panel"));
-  }
-  connectedCallback() {
-    super.connectedCallback();
+    `;
   }
-  $beforeUnmounted() {
-    e(this, M).abort();
+  /** 设置 ARIA 属性，遵循 W3C tabs 模式 */
+  _setupAria() {
+    var e;
+    this._container.setAttribute("role", "tabpanel"), this._container.id = `ea-tab-panel-${this.name}`, this._container.setAttribute("tabindex", "0");
+    const t = (e = this.closest("ea-tabs")) == null ? void 0 : e.querySelector(`ea-tab[panel="${this.name}"]`);
+    t != null && t.id && this._container.setAttribute("aria-labelledby", t.id);
   }
-}
-z = new WeakSet(), J = function() {
-  try {
-    return this.closest("ea-tabs");
-  } catch {
-    return null;
+  $mount() {
+    this.updateContainerClasslist(), this._setupAria();
   }
-}, R = new WeakMap(), M = new WeakMap();
-window.customElements.get("ea-tab-panel") || window.customElements.define("ea-tab-panel", et);
+};
+m([
+  _(".ea-tab-panel")
+], v.prototype, "_container", 2);
+m([
+  c({
+    type: String,
+    default: ""
+  })
+], v.prototype, "name", 2);
+m([
+  c({
+    type: y(["", "card", "border-card"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], v.prototype, "type", 2);
+m([
+  c({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "inert",
+      map: (t) => t ? null : ""
+    }
+  })
+], v.prototype, "active", 2);
+v = m([
+  C(q, { styles: [N] })
+], v);
+const Z = { EaTab: h, EaTabs: n, EaTabPanel: v };
 export {
-  V as EaTab,
-  et as EaTabPanel,
-  tt as EaTabs
+  h as EaTab,
+  v as EaTabPanel,
+  n as EaTabs,
+  Z as default
 };