@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/components/navigation/tabs/tabs.js

@@ -1,189 +1,431 @@
-import { createComponent as b, use as L, spread as H, mergeProps as J, insert as u, effect as h, setAttribute as p, setStyleProperty as x, style as K, template as w, delegateEvents as Q } from "solid-js/web";
-import { mergeProps as U, splitProps as Y, createSignal as m, onMount as k, createEffect as O, on as Z, onCleanup as tt, Show as S } from "solid-js";
-import et from "clsx";
-import { debounce as rt } from "../../../utils/debounce.js";
-import { animate as lt } from "../../../utils/animate.js";
-import { TabsContext as ot } from "./tabsContext.js";
-import { mergeRefs as st } from "../../../primitives/mergeRefs.js";
-import { Icon as T } from "../../base/icon/icon.js";
-var nt = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start">'), at = /* @__PURE__ */ w("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), it = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end">'), ct = /* @__PURE__ */ w("<div><div class=smwb-tabs__scroller><div class=smwb-tabs__scroll-area role=tablist>");
-const W = 40, dt = 0.8;
-function _t(I) {
-  const V = U({
+import { createComponent as u, use as R, spread as et, mergeProps as tt, insert as h, effect as T, setAttribute as C, setStyleProperty as pe, style as nt, memo as ye, template as L, isServer as rt, delegateEvents as ot } from "solid-js/web";
+import { mergeProps as st, splitProps as lt, createUniqueId as at, createSignal as f, onMount as Ie, createEffect as K, on as j, onCleanup as J, Show as O, For as it, createMemo as Le, children as xe, createComputed as Ce } from "solid-js";
+import ct from "clsx";
+import { debounce as dt } from "../../../utils/debounce.js";
+import { animate as ut } from "../../../utils/animate.js";
+import { matchesKeyboardShortcut as Q } from "../../../utils/keyboardShortcut.js";
+import { TabsContext as ft } from "./tabsContext.js";
+import { getHiddenIndexes as bt } from "./tabs.utils.js";
+import { MenuItem as mt } from "../menu/menuItem.js";
+import { mergeRefs as gt } from "../../../primitives/mergeRefs.js";
+import { createRovingTabIndex as ht } from "../../../primitives/createRovingTabIndex.js";
+import { Icon as Y } from "../../base/icon/icon.js";
+import { Menu as vt } from "../menu/menu.js";
+var wt = /* @__PURE__ */ L('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start"tabindex=-1>'), pt = /* @__PURE__ */ L("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), It = /* @__PURE__ */ L('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end"tabindex=-1>'), Lt = /* @__PURE__ */ L("<button type=button class=smwb-tabs__overflow-trigger aria-haspopup=menu tabindex=-1>"), _t = /* @__PURE__ */ L("<div><div class=smwb-tabs__scroller><div class=smwb-tabs__scroll-area role=tablist>"), yt = /* @__PURE__ */ L("<span class=smwb-tab__icon aria-hidden=true>"), xt = /* @__PURE__ */ L("<span class=smwb-tab__text-label>");
+const _e = 40, Ct = 0.8;
+function Mt(w) {
+  const p = xe(() => w.children);
+  return rt || Ce(() => w.onItems(p.toArray().filter((l) => l instanceof Element))), ye(p);
+}
+function Et(w) {
+  const p = xe(() => w.children);
+  return Ce(() => w.onPanels(p(), p.toArray().some((l) => l != null && l !== !1 && l !== ""))), null;
+}
+function Ft(w) {
+  const p = st({
     indicatorContent: !1,
     scrollable: !1,
     scrollButtons: !1,
+    overflowMenu: !1,
     dense: !1,
+    orientation: "horizontal",
     scrollBackAriaLabel: "Scroll tabs back",
-    scrollForwardAriaLabel: "Scroll tabs forward"
-  }, I), [s, F] = Y(V, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "dense", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), [X, D] = m(!1), [d, E] = m({
+    scrollForwardAriaLabel: "Scroll tabs forward",
+    overflowMenuAriaLabel: "More tabs"
+  }, w), [l, Me] = lt(p, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "onReorder", "overflowMenu", "overflowMenuAriaLabel", "dense", "orientation", "panels", "id", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), Ee = at(), Z = () => l.id ?? Ee, [M, ee] = f([]), Se = (e) => M().find((r) => r.index() === e)?.id() ?? `${Z()}-tab-${e}`, $e = (e) => `${Z()}-panel-${e}`, [Ae, De] = f(), [Re, Te] = f(!1), [te, B] = f(null), [Oe, Be] = f(!1), [_, ne] = f({
     root: {}
-  }), [g, M] = m(!1), [_, B] = m(!1);
-  let l, f, G = 0;
-  const y = [], $ = () => {
-    let t;
-    if (l) {
-      const i = l.getBoundingClientRect();
-      t = {
-        clientWidth: l.clientWidth,
-        scrollLeft: l.scrollLeft,
-        left: i.left,
-        right: i.right
+  }), [W, re] = f(!1), [F, oe] = f(!1), [se, le] = f([]), [ae, q] = f(!1);
+  let ie, c, b, v = null;
+  const [E, Pe] = f();
+  let ke = 0;
+  const ze = () => {
+    let e;
+    if (c) {
+      const s = c.getBoundingClientRect();
+      e = {
+        clientWidth: c.clientWidth,
+        scrollLeft: c.scrollLeft,
+        left: s.left,
+        right: s.right
       };
     }
-    let r = null, a = null;
-    if (l && f && f.children.length > 0) {
-      const i = f.children[s.value];
-      r = i ? i.getBoundingClientRect() : null, s.indicatorContent && (a = y[s.value]?.getBoundingClientRect() ?? null);
+    let r = null, t = null;
+    if (c && b && b.children.length > 0) {
+      const s = b.children[l.value];
+      r = s ? s.getBoundingClientRect() : null, l.indicatorContent && (t = s?.querySelector(".smwb-tab__content")?.getBoundingClientRect() ?? null);
     }
     return {
-      tabsMeta: t,
+      tabsMeta: e,
       tabMeta: r,
-      tabContentMeta: a
+      tabContentMeta: t
     };
-  }, A = () => {
+  }, ce = () => {
     const {
-      tabsMeta: t,
+      tabsMeta: e,
       tabMeta: r,
-      tabContentMeta: a
-    } = $();
-    let i = 0;
-    r && t && (i = r.left - t.left + t.scrollLeft);
-    const e = {
+      tabContentMeta: t
+    } = ze();
+    let s = 0;
+    r && e && (s = r.left - e.left + e.scrollLeft);
+    const n = {
       root: {
-        left: i,
+        left: s,
         width: r ? r.width : 0
       }
     };
-    s.indicatorContent && a && (e.content = {
-      width: a.width
+    l.indicatorContent && t && (n.content = {
+      width: t.width
     });
-    const o = d();
+    const o = _();
     if (o.root.left === void 0 || o.root.width === void 0) {
-      E(e);
+      ne(n);
       return;
     }
-    const n = Math.abs((o.root.left ?? 0) - (e.root.left ?? 0)), c = Math.abs((o.root.width ?? 0) - (e.root.width ?? 0));
-    (n >= 1 || c >= 1) && E(e);
-  }, v = () => {
-    if (!l || !s.scrollable) {
-      M(!1), B(!1);
+    const a = Math.abs((o.root.left ?? 0) - (n.root.left ?? 0)), i = Math.abs((o.root.width ?? 0) - (n.root.width ?? 0));
+    (a >= 1 || i >= 1) && ne(n);
+  }, S = () => {
+    if (!c || !l.scrollable) {
+      re(!1), oe(!1), le((t) => t.length === 0 ? t : []);
       return;
     }
-    const t = l.scrollWidth - l.clientWidth;
-    M(l.scrollLeft > 1), B(l.scrollLeft < t - 1);
-  }, C = (t) => {
-    l && lt(l, "scrollLeft", t, {
+    const e = c.scrollWidth - c.clientWidth;
+    re(c.scrollLeft > 1), oe(c.scrollLeft < e - 1);
+    const r = l.overflowMenu ? bt(b ? Array.from(b.children).map((t) => {
+      const s = t;
+      return {
+        offsetLeft: s.offsetLeft,
+        offsetWidth: s.offsetWidth
+      };
+    }) : [], c.scrollLeft, c.clientWidth) : [];
+    le((t) => t.length === r.length && t.every((s, n) => s === r[n]) ? t : r);
+  }, N = (e) => {
+    c && ut(c, "scrollLeft", e, {
       duration: 300
     });
-  }, R = (t) => {
-    l && C(l.scrollLeft + t * l.clientWidth * dt);
-  }, N = () => {
-    const {
-      tabsMeta: t,
-      tabMeta: r
-    } = $();
-    !r || !t || (r.left < t.left ? C(t.scrollLeft + (r.left - t.left) - W) : r.right > t.right && C(t.scrollLeft + (r.right - t.right) + W));
+  }, de = (e) => {
+    c && N(c.scrollLeft + e * c.clientWidth * Ct);
+  }, ue = (e) => {
+    if (!c || !b) return;
+    const r = b.children[e];
+    if (!r) return;
+    const t = c.getBoundingClientRect(), s = r.getBoundingClientRect();
+    s.left < t.left ? N(c.scrollLeft + (s.left - t.left) - _e) : s.right > t.right && N(c.scrollLeft + (s.right - t.right) + _e);
+  }, Ke = () => {
+    ue(l.value);
   };
-  k(() => D(!0)), O(Z(() => s.value, () => A())), k(() => {
-    const t = rt(() => {
-      A(), v();
-    }, 166), r = l?.ownerDocument.defaultView;
-    r?.addEventListener("resize", t), l?.addEventListener("scroll", v, {
+  Ie(() => Be(!0)), K(j([() => l.value, E], () => {
+    ce(), S();
+  })), Ie(() => {
+    const e = dt(() => {
+      ce(), S();
+    }, 166), r = c?.ownerDocument.defaultView;
+    r?.addEventListener("resize", e), c?.addEventListener("scroll", S, {
       passive: !0
     });
-    let a;
-    typeof ResizeObserver < "u" && f && (a = new ResizeObserver(t), l && a.observe(l), Array.from(f.children).forEach((i) => a?.observe(i))), v(), tt(() => {
-      t.cancel(), r?.removeEventListener("resize", t), l?.removeEventListener("scroll", v), a?.disconnect();
+    let t;
+    typeof ResizeObserver < "u" && b && (t = new ResizeObserver(e), c && t.observe(c), Array.from(b.children).forEach((s) => t?.observe(s))), S(), J(() => {
+      e.cancel(), r?.removeEventListener("resize", e), c?.removeEventListener("scroll", S), t?.disconnect();
     });
-  }), O(() => {
-    d(), N();
+  }), K(() => {
+    _(), Ke();
   });
-  const j = {
-    value: () => s.value,
-    onChange: s.onChange,
-    indicatorContent: s.indicatorContent,
-    registerTab: () => G++,
-    setContentRef: (t, r) => {
-      y[t] = r;
+  const g = () => Array.from(b?.querySelectorAll('[role="tab"]') ?? []), y = (e) => e.closest(".smwb-tab-item") ?? e, I = (e) => e ? g().findIndex((r) => y(r).contains(e)) : -1, $ = (e) => !e || e.getAttribute("aria-disabled") === "true" || e.disabled === !0, We = () => {
+    const e = E()?.length, r = e === void 0 || l.value >= 0 && l.value < e ? l.value : 0, t = M();
+    if (!t.some((n) => n.index() === r && n.disabled())) return r;
+    const s = t.filter((n) => !n.disabled()).map((n) => n.index()).filter((n) => n >= 0);
+    return s.length > 0 ? Math.min(...s) : r;
+  }, fe = () => te() ?? We(), Fe = ht({
+    count: () => g().length,
+    activeIndex: fe,
+    get orientation() {
+      return l.orientation;
+    },
+    onMove: (e) => g()[e]?.focus(),
+    isDisabled: (e) => $(g()[e])
+  });
+  let x = null, P = null, A = null;
+  const V = (e) => e instanceof Element ? y(e) : null, be = () => {
+    P?.classList.remove("smwb-tab-item--dragging"), A?.classList.remove("smwb-tab-item--drop-target"), P = null, A = null;
+  }, qe = (e) => {
+    if (!l.onReorder) return;
+    const r = V(e.target);
+    if (!r) return;
+    const t = I(r);
+    t < 0 || $(g()[t]) || (x = t, P = r, r.classList.add("smwb-tab-item--dragging"), e.dataTransfer?.setData("text/plain", String(t)), e.dataTransfer && (e.dataTransfer.effectAllowed = "move"));
+  }, Ne = (e) => {
+    if (x === null || !l.onReorder) return;
+    const r = V(e.target);
+    r && (e.preventDefault(), r !== A && (A?.classList.remove("smwb-tab-item--drop-target"), A = r, r.classList.add("smwb-tab-item--drop-target")));
+  }, Ve = (e) => {
+    if (x === null) return;
+    const r = x;
+    x = null;
+    const t = I(V(e.target)), s = P, n = r === l.value, o = s?.ownerDocument, a = !!(s && o?.activeElement && s.contains(o.activeElement));
+    if (be(), e.preventDefault(), t >= 0 && t !== r && (l.onReorder?.(r, t), n && l.onChange(e, t), a)) {
+      const i = g()[t];
+      i && y(i) === s && i.focus();
     }
-  }, z = () => s.scrollable && s.scrollButtons && (g() || _());
-  return b(ot.Provider, {
-    value: j,
-    get children() {
-      var t = ct(), r = t.firstChild, a = r.firstChild, i = st(s.ref);
-      return typeof i == "function" && L(i, t), H(t, J(F, {
-        get class() {
-          return et("smwb-tabs", {
-            "smwb-tabs--dense": s.dense,
-            "smwb-tabs--overflow-start": g(),
-            "smwb-tabs--overflow-end": _()
-          }, s.class);
-        },
-        role: "tabpanel"
-      }), !1, !0), u(t, b(S, {
-        get when() {
-          return z();
-        },
-        get children() {
-          var e = nt();
-          return e.$$click = () => R(-1), u(e, b(T, {
-            name: "chevron_left",
-            size: 20
-          })), h((o) => {
-            var n = s.scrollBackAriaLabel, c = !g();
-            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
-          }, {
-            e: void 0,
-            t: void 0
-          }), e;
+  }, He = () => {
+    x = null, be();
+  }, me = (e, r) => {
+    const t = g(), s = I(e.target);
+    if (!(s < 0 || t.length === 0))
+      for (let n = 1; n <= t.length; n += 1) {
+        const o = (s + r * n + t.length) % t.length, a = t[o];
+        if (a && !$(a)) {
+          a.focus(), a.click();
+          return;
         }
-      }), r), L((e) => l = e, r), L((e) => f = e, a), u(a, () => s.children), u(r, b(S, {
-        get when() {
-          return X();
-        },
-        get children() {
-          var e = at(), o = e.firstChild;
-          return h((n) => {
-            var c = `${d().root.left ?? 0}px`, P = `${d().root.width ?? 0}px`, q = d().content ? {
-              width: `${d().content?.width ?? 0}px`
-            } : {};
-            return c !== n.e && x(e, "left", n.e = c), P !== n.t && x(e, "width", n.t = P), n.a = K(o, q, n.a), n;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-          }), e;
+      }
+  }, Xe = (e) => {
+    if (!e.defaultPrevented) {
+      if ((e.ctrlKey || e.metaKey) && !e.altKey && I(e.target) >= 0) {
+        const r = I(e.target), t = M().find((s) => s.index() === r);
+        if (Q(e, ["Mod", "W"])) {
+          t && !t.disabled() && t.closable() && (e.preventDefault(), t.requestClose(e));
+          return;
         }
-      }), null), u(t, b(S, {
-        get when() {
-          return z();
-        },
+        if (Q(e, ["Mod", "Shift", "["])) {
+          e.preventDefault(), me(e, -1);
+          return;
+        }
+        if (Q(e, ["Mod", "Shift", "]"])) {
+          e.preventDefault(), me(e, 1);
+          return;
+        }
+      }
+      e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.target.closest('[role="tab"]') && Fe(e);
+    }
+  };
+  K(j(E, () => {
+    const e = b?.ownerDocument, r = v;
+    if (e && r && !r.item.isConnected && (v = null, !e.activeElement || e.activeElement === e.body)) {
+      const s = g(), n = Math.min(r.index, s.length - 1), o = [...s.keys()].filter((i) => !$(s[i])), a = o.find((i) => i >= n) ?? o[o.length - 1];
+      if (a !== void 0) {
+        s[a]?.focus(), B(a);
+        return;
+      }
+    }
+    if (te() === null) return;
+    const t = I(e?.activeElement);
+    B(t >= 0 ? t : null);
+  }, {
+    defer: !0
+  }));
+  const Ge = (e) => {
+    const r = I(e.target);
+    r >= 0 && B(r), v && !v.item.contains(e.target) && (v = null);
+  }, Ue = (e) => {
+    e.currentTarget.contains(e.relatedTarget) || (B(null), queueMicrotask(() => {
+      v?.item.isConnected && (v = null);
+    }));
+  }, je = {
+    value: () => l.value,
+    tabStop: (e) => fe() === e,
+    tabId: Se,
+    panelId: $e,
+    hasPanels: Re,
+    reorderable: () => l.onReorder !== void 0,
+    onChange: l.onChange,
+    closing: (e, r) => {
+      const t = g()[e], s = t?.ownerDocument.activeElement, n = r === "actions" || !!(s && t && y(t).contains(s));
+      v = t && n ? {
+        item: y(t),
+        index: e
+      } : null;
+    },
+    registerTab: (e, r) => {
+      const t = ke++, s = Le(() => {
+        const o = E();
+        if (!o) return t;
+        const a = e();
+        return a ? o.findIndex((i) => i.contains(a)) : -1;
+      }), n = {
+        ...r,
+        index: s
+      };
+      return ee((o) => [...o, n]), J(() => ee((o) => o.filter((a) => a !== n))), s;
+    }
+  }, ge = () => l.scrollable && l.scrollButtons && (W() || F()), Je = () => l.scrollable && l.overflowMenu && se().length > 0, k = (e) => e?.querySelector(".smwb-tab__icon") ?? void 0, H = (e) => e?.querySelector(".smwb-tab__text-label")?.textContent ?? "", he = (e, r) => {
+    const t = k(r);
+    t && Array.from(t.childNodes).forEach((s) => e.appendChild(s.cloneNode(!0)));
+  }, Qe = (e, r) => {
+    q(!1), l.onChange(e, r), ue(r);
+  };
+  return u(ft.Provider, {
+    value: je,
+    get children() {
+      return [u(Et, {
+        onPanels: (e, r) => (De(() => e), Te(r)),
         get children() {
-          var e = it();
-          return e.$$click = () => R(1), u(e, b(T, {
-            name: "chevron_right",
-            size: 20
-          })), h((o) => {
-            var n = s.scrollForwardAriaLabel, c = !_();
-            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
-          }, {
-            e: void 0,
-            t: void 0
-          }), e;
+          return l.panels;
         }
-      }), null), h((e) => {
-        var o = !!s.scrollable, n = s["aria-label"];
-        return o !== e.e && r.classList.toggle("smwb-tabs__scroller--scrollable", e.e = o), n !== e.t && p(a, "aria-label", e.t = n), e;
-      }, {
-        e: void 0,
-        t: void 0
-      }), t;
+      }), (() => {
+        var e = _t(), r = e.firstChild, t = r.firstChild, s = gt(l.ref);
+        return typeof s == "function" && R(s, e), et(e, tt(Me, {
+          get id() {
+            return l.id;
+          },
+          get class() {
+            return ct("smwb-tabs", {
+              "smwb-tabs--dense": l.dense,
+              "smwb-tabs--overflow-start": W(),
+              "smwb-tabs--overflow-end": F()
+            }, l.class);
+          }
+        }), !1, !0), h(e, u(O, {
+          get when() {
+            return ge();
+          },
+          get children() {
+            var n = wt();
+            return n.$$click = () => de(-1), h(n, u(Y, {
+              name: "chevron_left",
+              size: 20
+            })), T((o) => {
+              var a = l.scrollBackAriaLabel, i = !W();
+              return a !== o.e && C(n, "aria-label", o.e = a), i !== o.t && (n.disabled = o.t = i), o;
+            }, {
+              e: void 0,
+              t: void 0
+            }), n;
+          }
+        }), r), R((n) => c = n, r), t.addEventListener("dragend", He), t.addEventListener("drop", Ve), t.addEventListener("dragover", Ne), t.addEventListener("dragstart", qe), t.$$focusout = Ue, t.$$focusin = Ge, t.$$keydown = Xe, R((n) => b = n, t), h(t, u(Mt, {
+          onItems: Pe,
+          get children() {
+            return l.children;
+          }
+        })), h(r, u(O, {
+          get when() {
+            return Oe();
+          },
+          get children() {
+            var n = pt(), o = n.firstChild;
+            return T((a) => {
+              var i = `${_().root.left ?? 0}px`, D = `${_().root.width ?? 0}px`, X = _().content ? {
+                width: `${_().content?.width ?? 0}px`
+              } : {};
+              return i !== a.e && pe(n, "left", a.e = i), D !== a.t && pe(n, "width", a.t = D), a.a = nt(o, X, a.a), a;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            }), n;
+          }
+        }), null), h(e, u(O, {
+          get when() {
+            return ge();
+          },
+          get children() {
+            var n = It();
+            return n.$$click = () => de(1), h(n, u(Y, {
+              name: "chevron_right",
+              size: 20
+            })), T((o) => {
+              var a = l.scrollForwardAriaLabel, i = !F();
+              return a !== o.e && C(n, "aria-label", o.e = a), i !== o.t && (n.disabled = o.t = i), o;
+            }, {
+              e: void 0,
+              t: void 0
+            }), n;
+          }
+        }), null), h(e, u(O, {
+          get when() {
+            return Je();
+          },
+          get children() {
+            return [(() => {
+              var n = Lt();
+              return n.$$click = () => q((o) => !o), R((o) => ie = o, n), h(n, u(Y, {
+                name: "more_horiz",
+                size: 20
+              })), T((o) => {
+                var a = ae(), i = l.overflowMenuAriaLabel;
+                return a !== o.e && C(n, "aria-expanded", o.e = a), i !== o.t && C(n, "aria-label", o.t = i), o;
+              }, {
+                e: void 0,
+                t: void 0
+              }), n;
+            })(), u(vt, {
+              anchorElement: ie ?? null,
+              get isOpen() {
+                return ae();
+              },
+              onClose: () => q(!1),
+              placement: "bottom-end",
+              get children() {
+                return u(it, {
+                  get each() {
+                    return se();
+                  },
+                  children: (n) => {
+                    const o = () => g()[n], a = o(), [i, D] = f(H(a)), [X, Ye] = f(!!k(a)), Ze = Le(() => {
+                      const d = M().find((m) => m.index() === n);
+                      return d ? d.disabled() : $(o());
+                    });
+                    let z, G = a;
+                    const ve = (d) => {
+                      G = d;
+                      const m = k(d);
+                      Ye(!!m), z && m && (z.textContent = "", he(z, d));
+                    };
+                    return K(j([E, M], () => {
+                      const d = o();
+                      D(H(d)), ve(d);
+                      const m = d ? y(d) : null, U = m?.ownerDocument.defaultView;
+                      if (!m || !U || typeof U.MutationObserver > "u") return;
+                      const we = new U.MutationObserver(() => {
+                        D(H(d)), ve(d);
+                      });
+                      we.observe(m, {
+                        subtree: !0,
+                        childList: !0,
+                        characterData: !0
+                      }), J(() => we.disconnect());
+                    })), u(mt, {
+                      get disabled() {
+                        return Ze();
+                      },
+                      get "aria-current"() {
+                        return n === l.value ? "true" : void 0;
+                      },
+                      onClick: (d) => Qe(d, n),
+                      get children() {
+                        return [u(O, {
+                          get when() {
+                            return X();
+                          },
+                          get children() {
+                            var d = yt();
+                            return R((m) => {
+                              z = m, k(G) && he(m, G);
+                            }, d), d;
+                          }
+                        }), (() => {
+                          var d = xt();
+                          return h(d, i), d;
+                        })()];
+                      }
+                    });
+                  }
+                });
+              }
+            })];
+          }
+        }), null), T((n) => {
+          var o = !!l.scrollable, a = l["aria-label"], i = l.orientation;
+          return o !== n.e && r.classList.toggle("smwb-tabs__scroller--scrollable", n.e = o), a !== n.t && C(t, "aria-label", n.t = a), i !== n.a && C(t, "aria-orientation", n.a = i), n;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), e;
+      })(), ye(() => Ae())];
     }
   });
 }
-Q(["click"]);
+ot(["click", "keydown", "focusin", "focusout"]);
 export {
-  _t as Tabs
+  Ft as Tabs
 };
 //# sourceMappingURL=tabs.js.map