@floegence/floe-webapp-core 0.86.69 → 0.86.71

package/dist/components/ui/Tabs.js

@@ -1,42 +1,42 @@
-import { createComponent as v, spread as ue, mergeProps as fe, insert as f, effect as x, className as B, setStyleProperty as le, memo as ae, use as ie, setAttribute as m, template as C, delegateEvents as ze } from "solid-js/web";
-import { splitProps as ve, Show as I, createSignal as L, untrack as de, createEffect as K, onCleanup as ce } from "solid-js";
-import { cn as h } from "../../utils/cn.js";
+import { createComponent as h, spread as fe, mergeProps as ue, insert as u, effect as x, className as I, setStyleProperty as se, memo as le, use as ie, setAttribute as m, template as C, delegateEvents as Me } from "solid-js/web";
+import { splitProps as ve, Show as S, createSignal as L, untrack as ce, createEffect as X, onCleanup as de } from "solid-js";
+import { cn as v } from "../../utils/cn.js";
 import { deferAfterPaint as O } from "../../utils/defer.js";
-import { KeyedFor as Re } from "./KeyedFor.js";
-import { createUIFirstSelection as Te } from "../../utils/uiFirstSelection.js";
-import { useViewActivation as Ee } from "../../context/ViewActivationContext.js";
-import { X as He, Plus as Pe, ChevronRight as De } from "../icons/index.js";
-var Me = /* @__PURE__ */ C('<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">'), Oe = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Scroll left">'), We = /* @__PURE__ */ C("<div>"), Fe = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), _e = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Scroll right">'), je = /* @__PURE__ */ C("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), qe = /* @__PURE__ */ C("<span class=flex-shrink-0>"), Ge = /* @__PURE__ */ C("<button type=button data-floe-interactive=icon>"), Ue = /* @__PURE__ */ C('<div role=tab data-floe-surface-part=tab data-floe-interactive=item><span class="truncate max-w-32">'), Xe = /* @__PURE__ */ C("<div role=tabpanel>");
-const V = {
+import { KeyedFor as ze } from "./KeyedFor.js";
+import { createUIFirstSelection as Re } from "../../utils/uiFirstSelection.js";
+import { useViewActivation as Te } from "../../context/ViewActivationContext.js";
+import { X as Ee, Plus as He, ChevronRight as Pe } from "../icons/index.js";
+var De = /* @__PURE__ */ C('<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">'), Oe = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Scroll left">'), We = /* @__PURE__ */ C("<div>"), Fe = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), _e = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Scroll right">'), je = /* @__PURE__ */ C("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), qe = /* @__PURE__ */ C("<span class=flex-shrink-0>"), Ge = /* @__PURE__ */ C("<button type=button data-floe-interactive=icon>"), Ue = /* @__PURE__ */ C('<div role=tab data-floe-surface-part=tab data-floe-interactive=item><span class="truncate max-w-32">'), Xe = /* @__PURE__ */ C("<div role=tabpanel>");
+const K = {
   x: 0,
   width: 0,
   visible: !1
 };
 function Ke(i, t, b) {
-  const d = i.filter((k) => !k.disabled);
-  if (!d.length) return null;
-  const p = d.findIndex((k) => k.id === t);
-  if (p < 0) return null;
+  const c = i.filter((p) => !p.disabled);
+  if (!c.length) return null;
+  const k = c.findIndex((p) => p.id === t);
+  if (k < 0) return null;
   let g = null;
   switch (b) {
     case "ArrowRight":
     case "ArrowDown":
-      g = (p + 1) % d.length;
+      g = (k + 1) % c.length;
       break;
     case "ArrowLeft":
     case "ArrowUp":
-      g = (p - 1 + d.length) % d.length;
+      g = (k - 1 + c.length) % c.length;
       break;
     case "Home":
       g = 0;
       break;
     case "End":
-      g = d.length - 1;
+      g = c.length - 1;
       break;
     default:
       return null;
   }
-  return d[g]?.id ?? null;
+  return c[g]?.id ?? null;
 }
 function Ve(i) {
   return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
@@ -45,22 +45,22 @@ function Ye(i) {
   switch (i) {
     case 1:
       return {
-        tabBorderClass: "border-b",
+        tabMarkerClass: "after:h-px",
         sliderHeightClass: "h-px"
       };
     case 3:
       return {
-        tabBorderClass: "border-b-[3px]",
+        tabMarkerClass: "after:h-[3px]",
         sliderHeightClass: "h-[3px]"
       };
     case 4:
       return {
-        tabBorderClass: "border-b-4",
+        tabMarkerClass: "after:h-1",
         sliderHeightClass: "h-1"
       };
     default:
       return {
-        tabBorderClass: "border-b-2",
+        tabMarkerClass: "after:h-0.5",
         sliderHeightClass: "h-0.5"
       };
   }
@@ -69,173 +69,173 @@ function Je(i) {
   switch (i) {
     case "border":
       return {
-        tabBorderClass: "border-[var(--floe-line)]",
+        tabMarkerClass: "after:bg-[var(--floe-line)]",
         sliderBgClass: "bg-[var(--floe-line)]"
       };
     case "muted-foreground":
       return {
-        tabBorderClass: "border-muted-foreground",
+        tabMarkerClass: "after:bg-[var(--floe-ink-ghost)]",
         sliderBgClass: "bg-[var(--floe-ink-ghost)]"
       };
     default:
       return {
-        tabBorderClass: "border-[var(--floe-accent-ink)]",
+        tabMarkerClass: "after:bg-[var(--floe-accent-ink)]",
         sliderBgClass: "bg-[var(--floe-accent-ink)]"
       };
   }
 }
 const Qe = (i) => (() => {
-  var t = Me();
+  var t = De();
   return x(() => m(t, "class", i.class)), t;
 })();
 function Ze(i) {
   const {
     container: t,
     tab: b
-  } = i, d = b.offsetParent, p = b.offsetWidth;
-  if (d === t && Number.isFinite(b.offsetLeft) && Number.isFinite(p))
+  } = i, c = b.offsetParent, k = b.offsetWidth;
+  if (c === t && Number.isFinite(b.offsetLeft) && Number.isFinite(k))
     return {
       x: b.offsetLeft,
-      width: p,
-      visible: p > 0
+      width: k,
+      visible: k > 0
     };
-  const g = t.getBoundingClientRect(), k = b.getBoundingClientRect(), z = t.offsetWidth || t.clientWidth, S = g.width > 0 && z > 0 ? g.width / z : 1, R = Number.isFinite(S) && S > 0 ? S : 1, T = k.width / R;
+  const g = t.getBoundingClientRect(), p = b.getBoundingClientRect(), M = t.offsetWidth || t.clientWidth, A = g.width > 0 && M > 0 ? g.width / M : 1, z = Number.isFinite(A) && A > 0 ? A : 1, R = p.width / z;
   return {
-    x: (k.left - g.left + t.scrollLeft) / R,
-    width: T,
-    visible: T > 0
+    x: (p.left - g.left + t.scrollLeft) / z,
+    width: R,
+    visible: R > 0
   };
 }
-function dt(i) {
-  const [t, b] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => t.features?.indicator?.mode ?? "activeBorder", p = () => Ve(t.features?.indicator?.thicknessPx), g = () => t.features?.indicator?.colorToken ?? "primary", k = () => t.features?.indicator?.animated ?? !0, z = () => t.features?.containerBorder ?? !0, S = () => t.features?.scrollButtons ?? "auto", R = () => t.features?.closeButton?.dangerHover ?? !0, T = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, he = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, Y = () => Ye(p()), W = () => Je(g());
-  let u;
+function ct(i) {
+  const [t, b] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), c = () => t.features?.indicator?.mode ?? "activeBorder", k = () => Ve(t.features?.indicator?.thicknessPx), g = () => t.features?.indicator?.colorToken ?? "primary", p = () => t.features?.indicator?.animated ?? !0, M = () => t.features?.containerBorder ?? !0, A = () => t.features?.scrollButtons ?? "auto", z = () => t.features?.closeButton?.dangerHover ?? !0, R = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, he = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, V = () => Ye(k()), Y = () => Je(g());
+  let f;
   const J = (() => {
     try {
-      return Ee();
+      return Te();
     } catch {
       return null;
     }
-  })(), A = () => J ? J.active() : !0;
-  let F = !1;
-  const [E, _] = L(V), H = /* @__PURE__ */ new Map();
-  let j = !1;
-  const P = () => d() === "slider", Q = (s) => {
-    if (!u || !P()) return !1;
-    const r = H.get(s);
+  })(), B = () => J ? J.active() : !0;
+  let W = !1;
+  const [T, F] = L(K), E = /* @__PURE__ */ new Map();
+  let _ = !1;
+  const H = () => c() === "slider", Q = (a) => {
+    if (!f || !H()) return !1;
+    const r = E.get(a);
     if (!r) return !1;
-    const a = Ze({
-      container: u,
+    const l = Ze({
+      container: f,
       tab: r
     });
-    return _(a), a.visible;
+    return F(l), l.visible;
   }, be = () => {
-    if (!P()) {
-      _(V);
+    if (!H()) {
+      F(K);
       return;
     }
-    Q(q()) || _(V);
-  }, D = () => {
-    j || (j = !0, O(() => {
-      j = !1, de(() => {
-        A() && be();
+    Q(j()) || F(K);
+  }, P = () => {
+    _ || (_ = !0, O(() => {
+      _ = !1, ce(() => {
+        B() && be();
       });
     }));
-  }, Z = () => t.activeId !== void 0, ge = () => t.onChange ?? t.onActiveIdChange, [me, we] = L(de(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), ee = Te({
+  }, Z = () => t.activeId !== void 0, ge = () => t.onChange ?? t.onActiveIdChange, [me, we] = L(ce(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), ee = Re({
     committed: () => Z() ? t.activeId : me(),
-    commit: (s) => {
-      Z() || we(s), ge()?.(s);
+    commit: (a) => {
+      Z() || we(a), ge()?.(a);
     }
-  }), q = ee.visual;
-  K(() => {
-    A() && (d(), q(), D());
+  }), j = ee.visual;
+  X(() => {
+    B() && (c(), j(), P());
   });
-  const [G, Ce] = L(!1), [U, pe] = L(!1), [ke, ye] = L(!1), te = () => S() === "auto" && ke(), xe = () => {
-    if (!u) return;
+  const [q, Ce] = L(!1), [G, ke] = L(!1), [pe, ye] = L(!1), te = () => A() === "auto" && pe(), xe = () => {
+    if (!f) return;
     const {
-      scrollLeft: s,
+      scrollLeft: a,
       scrollWidth: r,
-      clientWidth: a
-    } = u, e = r > a;
-    ye(e), Ce(s > 0), pe(s + a < r - 1);
-  }, M = () => {
-    F || (F = !0, O(() => {
-      F = !1, A() && xe();
+      clientWidth: l
+    } = f, e = r > l;
+    ye(e), Ce(a > 0), ke(a + l < r - 1);
+  }, D = () => {
+    W || (W = !0, O(() => {
+      W = !1, B() && xe();
     }));
-  }, Be = () => {
-    u && u.scrollBy({
+  }, Ie = () => {
+    f && f.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, Ie = () => {
-    u && u.scrollBy({
+  }, Se = () => {
+    f && f.scrollBy({
       left: 150,
       behavior: "smooth"
     });
   };
-  K(() => {
-    if (!u || !A()) return;
-    M(), D();
-    const s = () => M();
-    u.addEventListener("scroll", s);
+  X(() => {
+    if (!f || !B()) return;
+    D(), P();
+    const a = () => D();
+    f.addEventListener("scroll", a);
     const r = () => {
-      M(), D();
+      D(), P();
     };
-    let a;
-    typeof ResizeObserver < "u" ? (a = new ResizeObserver(r), a.observe(u)) : typeof window < "u" && window.addEventListener("resize", r), ce(() => {
-      u?.removeEventListener("scroll", s), a?.disconnect(), typeof window < "u" && window.removeEventListener("resize", r);
+    let l;
+    typeof ResizeObserver < "u" ? (l = new ResizeObserver(r), l.observe(f)) : typeof window < "u" && window.addEventListener("resize", r), de(() => {
+      f?.removeEventListener("scroll", a), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", r);
     });
-  }), K(() => {
-    A() && (t.items.length, M(), D());
+  }), X(() => {
+    B() && (t.items.length, D(), P());
   });
-  const X = (s, r) => {
-    r || (ee.request(s), P() && Q(s));
-  }, Se = (s) => {
-    const r = t.items.find((e) => e.id === s);
+  const U = (a, r) => {
+    r || (ee.request(a), H() && Q(a));
+  }, Ae = (a) => {
+    const r = t.items.find((e) => e.id === a);
     if (!r) return;
-    X(r.id, r.disabled);
-    const a = H.get(r.id);
-    a?.focus({
+    U(r.id, r.disabled);
+    const l = E.get(r.id);
+    l?.focus({
       preventScroll: !0
-    }), a?.scrollIntoView({
+    }), l?.scrollIntoView({
       block: "nearest",
       inline: "nearest"
     });
-  }, Ae = (s, r) => {
-    const a = Ke(t.items, r.id, s.key);
-    a && (s.preventDefault(), Se(a));
-  }, Ne = (s, r) => {
-    s.stopPropagation();
-    const a = t.onClose;
-    if (!a) return;
+  }, Be = (a, r) => {
+    const l = Ke(t.items, r.id, a.key);
+    l && (a.preventDefault(), Ae(l));
+  }, Ne = (a, r) => {
+    a.stopPropagation();
+    const l = t.onClose;
+    if (!l) return;
     const e = r;
-    O(() => a(e));
+    O(() => l(e));
   }, $e = {
     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)]"
-  }, Le = (s, r) => {
-    const a = h("inline-flex items-center gap-1.5 whitespace-nowrap", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), e = r ? "cursor-not-allowed opacity-50" : "cursor-pointer", o = (() => {
-      const c = d();
-      return c === "none" || c === "slider" && E().visible ? "border-transparent" : W().tabBorderClass;
-    })();
-    return h(
-      a,
+  }, Le = (a, r) => {
+    const l = v("relative inline-flex items-center gap-1.5 whitespace-nowrap", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), e = r ? "cursor-not-allowed opacity-50" : "cursor-pointer", o = () => {
+      const d = c();
+      return d === "none" || d === "slider" && T().visible ? "" : v("after:pointer-events-none after:absolute after:bottom-0 after:inset-x-2 after:rounded-full after:content-['']", V().tabMarkerClass, Y().tabMarkerClass);
+    };
+    return v(
+      l,
       e,
       $e[t.size ?? "md"],
       "rounded-control",
-      Y().tabBorderClass,
+      "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. */
-      s ? h(o, "text-foreground", t.slotClassNames?.tabActive) : h("border-transparent text-[var(--floe-ink-soft)]", t.slotClassNames?.tabInactive),
+      a ? v(o(), "text-foreground", t.slotClassNames?.tabActive) : v("border-transparent text-[var(--floe-ink-soft)]", t.slotClassNames?.tabInactive),
       r && "opacity-50",
       t.slotClassNames?.tab
     );
   };
   return (() => {
-    var s = je(), r = s.firstChild;
-    ue(s, fe({
+    var a = je(), r = a.firstChild;
+    fe(a, ue({
       get class() {
-        return h(
+        return v(
           /* One strip, one baseline: the rail, the scroll buttons and the add
            * button all take their height from the row, so nothing floats above
            * the rule. The rail's fill is carried onto those trailing controls,
@@ -243,88 +243,88 @@ function dt(i) {
            * control. */
           "relative flex items-stretch",
           t.size === "sm" ? "min-h-[var(--floe-control-height-sm)]" : "min-h-[var(--floe-control-height-md)]",
-          z() && "border-b border-[var(--floe-line)]",
+          M() && "border-b border-[var(--floe-line)]",
           t.slotClassNames?.root,
           t.class
         );
       }
-    }, b), !1, !0), f(s, v(I, {
+    }, b), !1, !0), u(a, h(S, {
       get when() {
         return te();
       },
       get children() {
         var e = Oe();
-        return e.$$click = Be, f(e, v(Qe, {
+        return e.$$click = Ie, u(e, h(Qe, {
           class: "w-4 h-4"
         })), x((o) => {
-          var c = !G(), l = h("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)]", G() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
-          return c !== o.e && (e.disabled = o.e = c), l !== o.t && B(e, o.t = l), o;
+          var d = !q(), s = v("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)]", q() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
+          return d !== o.e && (e.disabled = o.e = d), s !== o.t && I(e, o.t = s), o;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
     }), r);
-    var a = u;
-    return typeof a == "function" ? ie(a, r) : u = r, f(r, v(I, {
+    var l = f;
+    return typeof l == "function" ? ie(l, r) : f = r, u(r, h(S, {
       get when() {
-        return ae(() => !!P())() && E().visible;
+        return le(() => !!H())() && T().visible;
       },
       get children() {
         var e = We();
         return x((o) => {
-          var c = h("pointer-events-none absolute bottom-0 left-0 z-10", Y().sliderHeightClass, W().sliderBgClass, k() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), l = `translate3d(${E().x}px, 0, 0)`, y = `${E().width}px`;
-          return c !== o.e && B(e, o.e = c), l !== o.t && le(e, "transform", o.t = l), y !== o.a && le(e, "width", o.a = y), o;
+          var d = v("pointer-events-none absolute bottom-0 left-0 z-10", V().sliderHeightClass, Y().sliderBgClass, p() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), s = `translate3d(${T().x}px, 0, 0)`, y = `${T().width}px`;
+          return d !== o.e && I(e, o.e = d), s !== o.t && se(e, "transform", o.t = s), y !== o.a && se(e, "width", o.a = y), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), e;
       }
-    }), null), f(r, v(Re, {
+    }), null), u(r, h(ze, {
       get each() {
         return t.items;
       },
       by: (e) => e.id,
       children: (e) => {
-        const o = () => e().id === q(), c = () => e().closable ?? T();
+        const o = () => e().id === j(), d = () => e().closable ?? R();
         return (() => {
-          var l = Ue(), y = l.firstChild;
-          return l.$$keydown = (n) => {
+          var s = Ue(), y = s.firstChild;
+          return s.$$keydown = (n) => {
             if (n.key === "Enter" || n.key === " ") {
-              n.preventDefault(), X(e().id, e().disabled);
+              n.preventDefault(), U(e().id, e().disabled);
               return;
             }
-            Ae(n, e());
-          }, l.$$click = () => X(e().id, e().disabled), ie((n) => {
-            H.set(e().id, n), ce(() => H.delete(e().id));
-          }, l), f(l, v(I, {
+            Be(n, e());
+          }, s.$$click = () => U(e().id, e().disabled), ie((n) => {
+            E.set(e().id, n), de(() => E.delete(e().id));
+          }, s), u(s, h(S, {
             get when() {
               return e().icon;
             },
             get children() {
               var n = qe();
-              return f(n, () => e().icon), n;
+              return u(n, () => e().icon), n;
             }
-          }), y), f(y, () => e().label), f(l, v(I, {
+          }), y), u(y, () => e().label), u(s, h(S, {
             get when() {
-              return ae(() => !!c())() && !e().disabled;
+              return le(() => !!d())() && !e().disabled;
             },
             get children() {
               var n = Ge();
-              return n.$$click = (w) => Ne(w, e().id), f(n, v(He, {
+              return n.$$click = (w) => Ne(w, e().id), u(n, h(Ee, {
                 class: "w-3 h-3"
               })), x((w) => {
-                var N = h("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", R() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", t.slotClassNames?.closeButton), $ = `Close ${e().label}`;
-                return N !== w.e && B(n, w.e = N), $ !== w.t && m(n, "aria-label", w.t = $), w;
+                var N = v("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", z() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", t.slotClassNames?.closeButton), $ = `Close ${e().label}`;
+                return N !== w.e && I(n, w.e = N), $ !== w.t && m(n, "aria-label", w.t = $), w;
               }, {
                 e: void 0,
                 t: void 0
               }), n;
             }
           }), null), x((n) => {
-            var w = Le(o(), e().disabled), N = e().domId, $ = e().panelId, re = o() ? "raised" : "flat", oe = o(), ne = e().disabled, se = e().disabled ? -1 : o() ? 0 : -1;
-            return w !== n.e && B(l, n.e = w), N !== n.t && m(l, "id", n.t = N), $ !== n.a && m(l, "aria-controls", n.a = $), re !== n.o && m(l, "data-floe-surface", n.o = re), oe !== n.i && m(l, "aria-selected", n.i = oe), ne !== n.n && m(l, "aria-disabled", n.n = ne), se !== n.s && m(l, "tabindex", n.s = se), n;
+            var w = Le(o(), e().disabled), N = e().domId, $ = e().panelId, re = o() ? "raised" : "flat", oe = o(), ne = e().disabled, ae = e().disabled ? -1 : o() ? 0 : -1;
+            return w !== n.e && I(s, n.e = w), N !== n.t && m(s, "id", n.t = N), $ !== n.a && m(s, "aria-controls", n.a = $), re !== n.o && m(s, "data-floe-surface", n.o = re), oe !== n.i && m(s, "aria-selected", n.i = oe), ne !== n.n && m(s, "aria-disabled", n.n = ne), ae !== n.s && m(s, "tabindex", n.s = ae), n;
           }, {
             e: void 0,
             t: void 0,
@@ -333,10 +333,10 @@ function dt(i) {
             i: void 0,
             n: void 0,
             s: void 0
-          }), l;
+          }), s;
         })();
       }
-    }), null), f(s, v(I, {
+    }), null), u(a, h(S, {
       get when() {
         return he();
       },
@@ -345,54 +345,54 @@ function dt(i) {
         return e.$$click = () => {
           const o = t.onAdd;
           o && O(() => o());
-        }, f(e, v(Pe, {
+        }, u(e, h(He, {
           get class() {
             return t.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), x(() => B(e, h("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(() => I(e, v("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), f(s, v(I, {
+    }), null), u(a, h(S, {
       get when() {
         return te();
       },
       get children() {
         var e = _e();
-        return e.$$click = Ie, f(e, v(De, {
+        return e.$$click = Se, u(e, h(Pe, {
           class: "w-4 h-4"
         })), x((o) => {
-          var c = !U(), l = h("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)]", U() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
-          return c !== o.e && (e.disabled = o.e = c), l !== o.t && B(e, o.t = l), o;
+          var d = !G(), s = v("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)]", G() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
+          return d !== o.e && (e.disabled = o.e = d), s !== o.t && I(e, o.t = s), o;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
     }), null), x((e) => {
-      var o = h(
-        "relative flex-1 flex items-end gap-0.5 overflow-x-auto",
+      var o = v(
+        "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 = G() ? "" : void 0, l = U() ? "" : void 0, y = t.ariaLabel;
-      return o !== e.e && B(r, e.e = o), c !== e.t && m(r, "data-floe-overflow-start", e.t = c), l !== e.a && m(r, "data-floe-overflow-end", e.a = l), y !== e.o && m(r, "aria-label", e.o = y), e;
+      ), d = q() ? "" : void 0, s = G() ? "" : void 0, y = t.ariaLabel;
+      return o !== e.e && I(r, e.e = o), d !== e.t && m(r, "data-floe-overflow-start", e.t = d), s !== e.a && m(r, "data-floe-overflow-end", e.a = s), y !== e.o && m(r, "aria-label", e.o = y), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), s;
+    }), a;
   })();
 }
-function ct(i) {
+function dt(i) {
   const [t, b] = ve(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
-  return v(I, {
+  return h(S, {
     get when() {
       return t.keepMounted || t.active;
     },
     get children() {
-      var d = Xe();
-      return ue(d, fe({
+      var c = Xe();
+      return fe(c, ue({
         get "aria-labelledby"() {
           return t.labelledBy;
         },
@@ -403,15 +403,15 @@ function ct(i) {
           return t.active ? 0 : -1;
         },
         get class() {
-          return h(!t.active && t.keepMounted && "hidden", t.class);
+          return v(!t.active && t.keepMounted && "hidden", t.class);
         }
-      }, b), !1, !0), f(d, () => t.children), d;
+      }, b), !1, !0), u(c, () => t.children), c;
     }
   });
 }
-ze(["click", "keydown"]);
+Me(["click", "keydown"]);
 export {
-  ct as TabPanel,
-  dt as Tabs,
+  dt as TabPanel,
+  ct as Tabs,
   Ke as resolveTabNavigationTargetId
 };