@floegence/floe-webapp-core 0.90.1 → 0.90.2

package/dist/components/ui/Tabs.js

@@ -1,22 +1,22 @@
-import { createComponent as g, spread as ye, mergeProps as pe, insert as h, effect as I, className as A, setAttribute as f, setStyleProperty as L, memo as Ce, use as ke, template as S, delegateEvents as qe } from "solid-js/web";
-import { splitProps as Ie, Show as B, createSignal as z, untrack as Q, createEffect as q, onCleanup as xe } from "solid-js";
+import { createComponent as g, spread as Ce, mergeProps as ke, insert as h, effect as x, className as S, setAttribute as f, setStyleProperty as J, memo as ge, use as me, template as I, delegateEvents as Fe } from "solid-js/web";
+import { splitProps as ye, Show as A, createSignal as N, untrack as Q, createEffect as W, onCleanup as we } from "solid-js";
 import { cn as b } from "../../utils/cn.js";
-import { deferAfterPaint as E } from "../../utils/defer.js";
-import { KeyedFor as je } from "./KeyedFor.js";
-import { createUIFirstSelection as Ge } from "../../utils/uiFirstSelection.js";
-import { useViewActivation as Ue } from "../../context/ViewActivationContext.js";
-import { X as Ve, Plus as Xe, ChevronRight as Ke } from "../icons/index.js";
-import { createTabReorder as Ye } from "./tabReorder.js";
-var Je = /* @__PURE__ */ S('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), Z = /* @__PURE__ */ S("<button type=button data-floe-interactive=icon>"), Qe = /* @__PURE__ */ S("<div>"), Ze = /* @__PURE__ */ S('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), _e = /* @__PURE__ */ S("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), et = /* @__PURE__ */ S("<span class=flex-shrink-0>"), tt = /* @__PURE__ */ S('<div role=tab data-floe-surface-part=tab data-floe-interactive=item style=user-select:none;-webkit-user-select:none><span class="min-w-0 truncate max-w-32">'), rt = /* @__PURE__ */ S("<div role=tabpanel>");
+import { deferAfterPaint as T } from "../../utils/defer.js";
+import { KeyedFor as Oe } from "./KeyedFor.js";
+import { createUIFirstSelection as We } from "../../utils/uiFirstSelection.js";
+import { useViewActivation as qe } from "../../context/ViewActivationContext.js";
+import { X as je, Plus as Ge, ChevronRight as Ue } from "../icons/index.js";
+import { createTabReorder as Ve } from "./tabReorder.js";
+var Xe = /* @__PURE__ */ I('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), Z = /* @__PURE__ */ I("<button type=button data-floe-interactive=icon>"), Ke = /* @__PURE__ */ I("<div>"), Ye = /* @__PURE__ */ I('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), Je = /* @__PURE__ */ I("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), Qe = /* @__PURE__ */ I("<span class=flex-shrink-0>"), Ze = /* @__PURE__ */ I('<div role=tab data-floe-surface-part=tab data-floe-interactive=item style=user-select:none;-webkit-user-select:none><span class="min-w-0 truncate max-w-32">'), _e = /* @__PURE__ */ I("<div role=tabpanel>");
 const _ = {
   x: 0,
   width: 0,
   visible: !1
 };
-function ot(i, t, m) {
-  const d = i.filter((x) => !x.disabled);
+function et(i, t, m) {
+  const d = i.filter((y) => !y.disabled);
   if (!d.length) return null;
-  const k = d.findIndex((x) => x.id === t);
+  const k = d.findIndex((y) => y.id === t);
   if (k < 0) return null;
   let w = null;
   switch (m) {
@@ -39,10 +39,10 @@ function ot(i, t, m) {
   }
   return d[w]?.id ?? null;
 }
-function nt(i) {
+function tt(i) {
   return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
 }
-function at(i) {
+function rt(i) {
   switch (i) {
     case 1:
       return {
@@ -66,7 +66,7 @@ function at(i) {
       };
   }
 }
-function st(i) {
+function ot(i) {
   switch (i) {
     case "border":
       return {
@@ -85,11 +85,11 @@ function st(i) {
       };
   }
 }
-const lt = (i) => (() => {
-  var t = Je();
-  return I(() => f(t, "class", i.class)), t;
+const nt = (i) => (() => {
+  var t = Xe();
+  return x(() => f(t, "class", i.class)), t;
 })();
-function it(i) {
+function at(i) {
   const {
     container: t,
     tab: m
@@ -100,160 +100,160 @@ function it(i) {
       width: k,
       visible: k > 0
     };
-  const w = t.getBoundingClientRect(), x = m.getBoundingClientRect(), D = t.offsetWidth || t.clientWidth, M = w.width > 0 && D > 0 ? w.width / D : 1, H = Number.isFinite(M) && M > 0 ? M : 1, P = x.width / H;
+  const w = t.getBoundingClientRect(), y = m.getBoundingClientRect(), z = t.offsetWidth || t.clientWidth, R = w.width > 0 && z > 0 ? w.width / z : 1, E = Number.isFinite(R) && R > 0 ? R : 1, D = y.width / E;
   return {
-    x: (x.left - w.left + t.scrollLeft) / H,
-    width: P,
-    visible: P > 0
+    x: (y.left - w.left + t.scrollLeft) / E,
+    width: D,
+    visible: D > 0
   };
 }
-function wt(i) {
-  const [t, m] = Ie(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "onReorder", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "labels", "class"]), d = () => t.features?.indicator?.mode ?? "activeBorder", k = () => nt(t.features?.indicator?.thicknessPx), w = () => t.features?.indicator?.colorToken ?? "primary", x = () => t.features?.indicator?.animated ?? !0, D = () => t.features?.containerBorder ?? !0, M = () => t.features?.scrollButtons ?? "auto", H = () => t.features?.closeButton?.dangerHover ?? !0, P = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, Se = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, ee = () => at(k()), te = () => st(w());
+function bt(i) {
+  const [t, m] = ye(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "onReorder", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "labels", "class"]), d = () => t.features?.indicator?.mode ?? "activeBorder", k = () => tt(t.features?.indicator?.thicknessPx), w = () => t.features?.indicator?.colorToken ?? "primary", y = () => t.features?.indicator?.animated ?? !0, z = () => t.features?.containerBorder ?? !0, R = () => t.features?.scrollButtons ?? "auto", E = () => t.features?.closeButton?.dangerHover ?? !0, D = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, pe = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, ee = () => rt(k()), te = () => ot(w());
   let u;
   const re = (() => {
     try {
-      return Ue();
+      return qe();
     } catch {
       return null;
     }
-  })(), R = () => re ? re.active() : !0;
-  let j = !1;
-  const [$, G] = z(_), y = /* @__PURE__ */ new Map(), p = Ye({
+  })(), B = () => re ? re.active() : !0;
+  let q = !1;
+  const [$, j] = N(_), p = /* @__PURE__ */ new Map(), H = Ve({
     items: () => t.items,
     onReorder: () => t.onReorder,
     container: () => u,
-    elements: y
+    elements: p
   });
-  let U = !1;
-  const F = () => d() === "slider", oe = (n) => {
-    if (!u || !F()) return !1;
-    const s = y.get(n);
-    if (!s) return !1;
-    const l = it({
+  let G = !1;
+  const P = () => d() === "slider", oe = (n) => {
+    if (!u || !P()) return !1;
+    const a = p.get(n);
+    if (!a) return !1;
+    const l = at({
       container: u,
-      tab: s
+      tab: a
     });
-    return G(l), l.visible;
-  }, Ae = () => {
-    if (!F()) {
-      G(_);
+    return j(l), l.visible;
+  }, xe = () => {
+    if (!P()) {
+      j(_);
       return;
     }
-    oe(X()) || G(_);
-  }, O = () => {
-    U || (U = !0, E(() => {
-      U = !1, Q(() => {
-        R() && Ae();
+    oe(V()) || j(_);
+  }, F = () => {
+    G || (G = !0, T(() => {
+      G = !1, Q(() => {
+        B() && xe();
       });
     }));
-  }, ne = () => t.activeId !== void 0, Be = () => t.onChange ?? t.onActiveIdChange, [Re, Le] = z(Q(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), V = () => ne() ? t.activeId : Re(), ae = Ge({
-    committed: V,
+  }, ne = () => t.activeId !== void 0, Ie = () => t.onChange ?? t.onActiveIdChange, [Se, Ae] = N(Q(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), U = () => ne() ? t.activeId : Se(), ae = We({
+    committed: U,
     commit: (n) => {
-      ne() || Le(n), Be()?.(n);
+      ne() || Ae(n), Ie()?.(n);
     }
-  }), X = ae.visual;
-  q(() => {
-    R() && (d(), X(), O());
+  }), V = ae.visual;
+  W(() => {
+    B() && (d(), V(), F());
   });
-  const [K, Me] = z(!1), [Y, Ne] = z(!1), [Te, ze] = z(!1), se = () => M() === "auto" && Te(), Ee = () => {
+  const [X, Be] = N(!1), [K, Re] = N(!1), [Le, Me] = N(!1), se = () => R() === "auto" && Le(), Ne = () => {
     if (!u) return;
     const {
       scrollLeft: n,
-      scrollWidth: s,
+      scrollWidth: a,
       clientWidth: l
-    } = u, e = s > l;
-    ze(e), Me(n > 0), Ne(n + l < s - 1);
-  }, W = () => {
-    j || (j = !0, E(() => {
-      j = !1, R() && Ee();
+    } = u, e = a > l;
+    Me(e), Be(n > 0), Re(n + l < a - 1);
+  }, O = () => {
+    q || (q = !0, T(() => {
+      q = !1, B() && Ne();
     }));
-  }, De = () => {
+  }, Te = () => {
     u && u.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, He = () => {
+  }, ze = () => {
     u && u.scrollBy({
       left: 150,
       behavior: "smooth"
     });
   };
-  q(() => {
-    if (!u || !R()) return;
-    W(), O();
-    const n = () => W();
+  W(() => {
+    if (!u || !B()) return;
+    O(), F();
+    const n = () => O();
     u.addEventListener("scroll", n);
-    const s = () => {
-      W(), O();
+    const a = () => {
+      O(), F();
     };
     let l;
-    typeof ResizeObserver < "u" ? (l = new ResizeObserver(s), l.observe(u)) : typeof window < "u" && window.addEventListener("resize", s), xe(() => {
-      u?.removeEventListener("scroll", n), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", s);
+    typeof ResizeObserver < "u" ? (l = new ResizeObserver(a), l.observe(u)) : typeof window < "u" && window.addEventListener("resize", a), we(() => {
+      u?.removeEventListener("scroll", n), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", a);
     });
-  }), q(() => {
-    const n = V();
-    E(() => {
-      R() && y.get(n)?.scrollIntoView?.({
+  }), W(() => {
+    const n = U();
+    T(() => {
+      B() && p.get(n)?.scrollIntoView?.({
         block: "nearest",
         inline: "nearest"
       });
     });
-  }), q(() => {
-    R() && (t.items.length, W(), O());
+  }), W(() => {
+    B() && (t.items.length, O(), F());
   });
-  const J = (n, s) => {
-    s || (ae.request(n), F() && oe(n));
-  }, Pe = (n) => {
-    const s = t.items.find((e) => e.id === n);
-    if (!s) return;
-    J(s.id, s.disabled);
-    const l = y.get(s.id);
+  const Y = (n, a) => {
+    a || (ae.request(n), P() && oe(n));
+  }, Ee = (n) => {
+    const a = t.items.find((e) => e.id === n);
+    if (!a) return;
+    Y(a.id, a.disabled);
+    const l = p.get(a.id);
     l?.focus({
       preventScroll: !0
     }), l?.scrollIntoView({
       block: "nearest",
       inline: "nearest"
     });
-  }, $e = (n, s) => {
-    const l = ot(t.items, s.id, n.key);
-    l && (n.preventDefault(), Pe(l));
+  }, De = (n, a) => {
+    const l = et(t.items, a.id, n.key);
+    l && (n.preventDefault(), Ee(l));
   }, le = (n) => {
-    const l = !!y.get(n)?.contains(document.activeElement), e = t.items.findIndex((o) => o.id === n);
+    const l = !!p.get(n)?.contains(document.activeElement), e = t.items.findIndex((o) => o.id === n);
     if (t.onClose?.(n), l && !t.items.some((o) => o.id === n)) {
-      const o = t.items.find((c) => c.id === V()) ?? t.items[Math.min(e, t.items.length - 1)];
-      o && y.get(o.id)?.focus({
+      const o = t.items.find((c) => c.id === U()) ?? t.items[Math.min(e, t.items.length - 1)];
+      o && p.get(o.id)?.focus({
         preventScroll: !0
       });
     }
-  }, Fe = (n, s) => {
+  }, $e = (n, a) => {
     if (n.stopPropagation(), !t.onClose) return;
-    const e = s;
-    E(() => Q(() => le(e)));
-  }, Oe = {
+    const e = a;
+    T(() => Q(() => le(e)));
+  }, He = {
     sm: "h-[var(--floe-control-height-sm)] px-[var(--floe-control-padding-sm)]",
     md: "h-[var(--floe-control-height-md)] px-[var(--floe-control-padding-md)]"
-  }, We = (n, s) => {
-    const l = b("relative inline-flex items-center gap-1.5 whitespace-nowrap select-none", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), e = s ? "cursor-not-allowed opacity-50" : "cursor-pointer", o = () => {
+  }, Pe = (n, a) => {
+    const l = b("relative inline-flex items-center gap-1.5 whitespace-nowrap select-none", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), e = a ? "cursor-not-allowed opacity-50" : "cursor-pointer", o = () => {
       const c = d();
       return c === "none" || c === "slider" && $().visible ? "" : b("after:pointer-events-none after:absolute after:bottom-0 after:inset-x-2 after:rounded-full after:content-['']", ee().tabMarkerClass, te().tabMarkerClass);
     };
     return b(
       l,
       e,
-      Oe[t.size ?? "md"],
+      He[t.size ?? "md"],
       "rounded-control",
       "border",
       /* The selected face is painted by the surface layer (`data-floe-surface`
        * plus `aria-selected`), which keeps the fill, hairline and first
        * elevation step identical to every other selected control. */
       n ? b(o(), "text-foreground", t.slotClassNames?.tabActive) : b("border-transparent text-[var(--floe-ink-soft)]", t.slotClassNames?.tabInactive),
-      s && "opacity-50",
+      a && "opacity-50",
       t.slotClassNames?.tab
     );
   };
   return (() => {
-    var n = _e(), s = n.firstChild;
-    ye(n, pe({
+    var n = Je(), a = n.firstChild;
+    Ce(n, ke({
       get class() {
         return b(
           /* One strip, one baseline: the rail, the scroll buttons and the add
@@ -263,101 +263,101 @@ function wt(i) {
            * control. */
           "relative flex items-stretch",
           t.size === "sm" ? "min-h-[var(--floe-control-height-sm)]" : "min-h-[var(--floe-control-height-md)]",
-          D() && "border-b border-[var(--floe-line)]",
+          z() && "border-b border-[var(--floe-line)]",
           t.slotClassNames?.root,
           t.class
         );
       }
-    }, m), !1, !0), h(n, g(B, {
+    }, m), !1, !0), h(n, g(A, {
       get when() {
         return se();
       },
       get children() {
         var e = Z();
-        return e.$$click = De, h(e, g(lt, {
+        return e.$$click = Te, h(e, g(nt, {
           class: "w-4 h-4"
-        })), I((o) => {
-          var c = !K(), a = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", K() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), v = t.labels?.scrollLeft ?? "Scroll left";
-          return c !== o.e && (e.disabled = o.e = c), a !== o.t && A(e, o.t = a), v !== o.a && f(e, "aria-label", o.a = v), o;
+        })), x((o) => {
+          var c = !X(), s = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", X() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), v = t.labels?.scrollLeft ?? "Scroll left";
+          return c !== o.e && (e.disabled = o.e = c), s !== o.t && S(e, o.t = s), v !== o.a && f(e, "aria-label", o.a = v), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), e;
       }
-    }), s);
+    }), a);
     var l = u;
-    return typeof l == "function" ? ke(l, s) : u = s, h(s, g(B, {
+    return typeof l == "function" ? me(l, a) : u = a, h(a, g(A, {
       get when() {
-        return Ce(() => !!F())() && $().visible;
+        return ge(() => !!P())() && $().visible;
       },
       get children() {
-        var e = Qe();
-        return I((o) => {
-          var c = b("pointer-events-none absolute bottom-0 left-0 z-10", ee().sliderHeightClass, te().sliderBgClass, x() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), a = `translate3d(${$().x}px, 0, 0)`, v = `${$().width}px`;
-          return c !== o.e && A(e, o.e = c), a !== o.t && L(e, "transform", o.t = a), v !== o.a && L(e, "width", o.a = v), o;
+        var e = Ke();
+        return x((o) => {
+          var c = b("pointer-events-none absolute bottom-0 left-0 z-10", ee().sliderHeightClass, te().sliderBgClass, y() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), s = `translate3d(${$().x}px, 0, 0)`, v = `${$().width}px`;
+          return c !== o.e && S(e, o.e = c), s !== o.t && J(e, "transform", o.t = s), v !== o.a && J(e, "width", o.a = v), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), e;
       }
-    }), null), h(s, g(je, {
+    }), null), h(a, g(Oe, {
       get each() {
         return t.items;
       },
       by: (e) => e.id,
       children: (e) => {
-        const o = () => e().id === X(), c = () => e().closable ?? P();
+        const o = () => e().id === V(), c = () => e().closable ?? D();
         return (() => {
-          var a = tt(), v = a.firstChild;
-          return a.$$keydown = (r) => {
-            if (r.target === r.currentTarget && !p.keyDown(r, e())) {
+          var s = Ze(), v = s.firstChild;
+          return s.$$keydown = (r) => {
+            if (r.target === r.currentTarget && !H.keyDown(r, e())) {
               if (r.key === "Delete" && c() && !e().disabled) {
                 r.preventDefault(), le(e().id);
                 return;
               }
               if (r.key === "Enter" || r.key === " ") {
-                r.preventDefault(), J(e().id, e().disabled);
+                r.preventDefault(), Y(e().id, e().disabled);
                 return;
               }
-              $e(r, e());
+              De(r, e());
             }
-          }, a.addEventListener("dragstart", (r) => r.preventDefault()), a.$$pointerdown = (r) => p.start(r, e()), a.$$click = (r) => {
-            if (p.suppressClick()) {
+          }, s.addEventListener("dragstart", (r) => r.preventDefault()), s.$$pointerdown = (r) => H.start(r, e()), s.$$click = (r) => {
+            if (H.suppressClick()) {
               r.preventDefault(), r.stopPropagation();
               return;
             }
-            J(e().id, e().disabled);
-          }, ke((r) => {
-            y.set(e().id, r), xe(() => y.delete(e().id));
-          }, a), h(a, g(B, {
+            Y(e().id, e().disabled);
+          }, me((r) => {
+            p.set(e().id, r), we(() => p.delete(e().id));
+          }, s), h(s, g(A, {
             get when() {
               return e().icon;
             },
             get children() {
-              var r = et();
+              var r = Qe();
               return h(r, () => e().icon), r;
             }
-          }), v), h(v, () => e().label), h(a, g(B, {
+          }), v), h(v, () => e().label), h(s, g(A, {
             get when() {
-              return Ce(() => !!c())() && !e().disabled;
+              return ge(() => !!c())() && !e().disabled;
             },
             get children() {
               var r = Z();
-              return r.$$click = (C) => Fe(C, e().id), h(r, g(Ve, {
+              return r.$$click = (C) => $e(C, e().id), h(r, g(je, {
                 class: "w-3 h-3"
-              })), I((C) => {
-                var N = b("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", H() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", t.slotClassNames?.closeButton), T = e().closeLabel ?? `Close ${e().label}`;
-                return N !== C.e && A(r, C.e = N), T !== C.t && f(r, "aria-label", C.t = T), C;
+              })), x((C) => {
+                var L = b("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", E() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", t.slotClassNames?.closeButton), M = e().closeLabel ?? `Close ${e().label}`;
+                return L !== C.e && S(r, C.e = L), M !== C.t && f(r, "aria-label", C.t = M), C;
               }, {
                 e: void 0,
                 t: void 0
               }), r;
             }
-          }), null), I((r) => {
-            var C = We(o(), e().disabled), N = e().id, T = p.dragging() === e().id ? "true" : void 0, ie = t.onReorder ? "none" : "pan-x", ce = p.dragging() === e().id ? "0.55" : void 0, de = p.dragging() ? "grabbing" : void 0, fe = p.before() === e().id ? "-2px 0 0 var(--floe-accent-ink)" : p.after() === e().id ? "2px 0 0 var(--floe-accent-ink)" : void 0, ue = e().domId, ve = e().panelId, he = e().title, be = o() ? "raised" : "flat", ge = o(), me = e().disabled, we = e().disabled ? -1 : o() ? 0 : -1;
-            return C !== r.e && A(a, r.e = C), N !== r.t && f(a, "data-floe-tab-id", r.t = N), T !== r.a && f(a, "data-floe-tab-dragging", r.a = T), ie !== r.o && L(a, "touch-action", r.o = ie), ce !== r.i && L(a, "opacity", r.i = ce), de !== r.n && L(a, "cursor", r.n = de), fe !== r.s && L(a, "box-shadow", r.s = fe), ue !== r.h && f(a, "id", r.h = ue), ve !== r.r && f(a, "aria-controls", r.r = ve), he !== r.d && f(a, "title", r.d = he), be !== r.l && f(a, "data-floe-surface", r.l = be), ge !== r.u && f(a, "aria-selected", r.u = ge), me !== r.c && f(a, "aria-disabled", r.c = me), we !== r.w && f(a, "tabindex", r.w = we), r;
+          }), null), x((r) => {
+            var C = Pe(o(), e().disabled), L = e().id, M = H.dragging() === e().id ? "true" : void 0, ie = t.onReorder ? "none" : "pan-x", ce = e().domId, de = e().panelId, fe = e().title, ue = o() ? "raised" : "flat", ve = o(), he = e().disabled, be = e().disabled ? -1 : o() ? 0 : -1;
+            return C !== r.e && S(s, r.e = C), L !== r.t && f(s, "data-floe-tab-id", r.t = L), M !== r.a && f(s, "data-floe-tab-dragging", r.a = M), ie !== r.o && J(s, "touch-action", r.o = ie), ce !== r.i && f(s, "id", r.i = ce), de !== r.n && f(s, "aria-controls", r.n = de), fe !== r.s && f(s, "title", r.s = fe), ue !== r.h && f(s, "data-floe-surface", r.h = ue), ve !== r.r && f(s, "aria-selected", r.r = ve), he !== r.d && f(s, "aria-disabled", r.d = he), be !== r.l && f(s, "tabindex", r.l = be), r;
           }, {
             e: void 0,
             t: void 0,
@@ -369,54 +369,51 @@ function wt(i) {
             h: void 0,
             r: void 0,
             d: void 0,
-            l: void 0,
-            u: void 0,
-            c: void 0,
-            w: void 0
-          }), a;
+            l: void 0
+          }), s;
         })();
       }
-    }), null), h(n, g(B, {
+    }), null), h(n, g(A, {
       get when() {
-        return Se();
+        return pe();
       },
       get children() {
-        var e = Ze();
+        var e = Ye();
         return e.$$click = () => {
           const o = t.onAdd;
-          o && E(() => o());
-        }, h(e, g(Xe, {
+          o && T(() => o());
+        }, h(e, g(Ge, {
           get class() {
             return t.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), I(() => A(e, b("flex-shrink-0 flex items-center justify-center", "rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] hover:text-foreground", t.size === "sm" ? "w-7" : "w-8", t.slotClassNames?.addButton))), e;
+        })), x(() => S(e, b("flex-shrink-0 flex items-center justify-center", "rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] hover:text-foreground", t.size === "sm" ? "w-7" : "w-8", t.slotClassNames?.addButton))), e;
       }
-    }), null), h(n, g(B, {
+    }), null), h(n, g(A, {
       get when() {
         return se();
       },
       get children() {
         var e = Z();
-        return e.$$click = He, h(e, g(Ke, {
+        return e.$$click = ze, h(e, g(Ue, {
           class: "w-4 h-4"
-        })), I((o) => {
-          var c = !Y(), a = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", Y() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), v = t.labels?.scrollRight ?? "Scroll right";
-          return c !== o.e && (e.disabled = o.e = c), a !== o.t && A(e, o.t = a), v !== o.a && f(e, "aria-label", o.a = v), o;
+        })), x((o) => {
+          var c = !K(), s = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", K() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), v = t.labels?.scrollRight ?? "Scroll right";
+          return c !== o.e && (e.disabled = o.e = c), s !== o.t && S(e, o.t = s), v !== o.a && f(e, "aria-label", o.a = v), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), e;
       }
-    }), null), I((e) => {
+    }), null), x((e) => {
       var o = b(
         "relative flex-1 flex items-center gap-0.5 overflow-x-auto",
         "scrollbar-none",
         // Hide scrollbar for all browsers
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
         t.slotClassNames?.scrollContainer
-      ), c = K() ? "" : void 0, a = Y() ? "" : void 0, v = t.ariaLabel;
-      return o !== e.e && A(s, e.e = o), c !== e.t && f(s, "data-floe-overflow-start", e.t = c), a !== e.a && f(s, "data-floe-overflow-end", e.a = a), v !== e.o && f(s, "aria-label", e.o = v), e;
+      ), c = X() ? "" : void 0, s = K() ? "" : void 0, v = t.ariaLabel;
+      return o !== e.e && S(a, e.e = o), c !== e.t && f(a, "data-floe-overflow-start", e.t = c), s !== e.a && f(a, "data-floe-overflow-end", e.a = s), v !== e.o && f(a, "aria-label", e.o = v), e;
     }, {
       e: void 0,
       t: void 0,
@@ -425,15 +422,15 @@ function wt(i) {
     }), n;
   })();
 }
-function Ct(i) {
-  const [t, m] = Ie(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
-  return g(B, {
+function gt(i) {
+  const [t, m] = ye(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
+  return g(A, {
     get when() {
       return t.keepMounted || t.active;
     },
     get children() {
-      var d = rt();
-      return ye(d, pe({
+      var d = _e();
+      return Ce(d, ke({
         get "aria-labelledby"() {
           return t.labelledBy;
         },
@@ -450,9 +447,9 @@ function Ct(i) {
     }
   });
 }
-qe(["click", "pointerdown", "keydown"]);
+Fe(["click", "pointerdown", "keydown"]);
 export {
-  Ct as TabPanel,
-  wt as Tabs,
-  ot as resolveTabNavigationTargetId
+  gt as TabPanel,
+  bt as Tabs,
+  et as resolveTabNavigationTargetId
 };

package/dist/components/ui/tabReorder.d.ts

@@ -2,7 +2,7 @@ type Item = {
     id: string;
     disabled?: boolean;
 };
-/** A drag proposes an insertion; only a completed drop changes host-owned order. */
+/** Preview order with transforms; only a completed drop changes host-owned order. */
 export declare function createTabReorder(options: {
     items: () => Item[];
     onReorder: () => ((ids: string[]) => void) | undefined;
@@ -12,8 +12,6 @@ export declare function createTabReorder(options: {
     start: (event: PointerEvent, item: Item) => void;
     keyDown: (event: KeyboardEvent, item: Item) => boolean;
     dragging: import("solid-js").Accessor<string | undefined>;
-    before: import("solid-js").Accessor<string | undefined>;
-    after: import("solid-js").Accessor<string | undefined>;
     suppressClick: () => boolean;
 };
 export {};