@floegence/floe-webapp-core 0.86.60 → 0.86.63

package/dist/components/ui/Tabs.js

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

package/dist/components/ui/Tag.js

@@ -1,24 +1,27 @@
-import { spread as i, mergeProps as u, insert as a, memo as n, createComponent as p, Dynamic as f, template as l } from "solid-js/web";
-import { splitProps as m } from "solid-js";
-import { cn as d } from "../../utils/cn.js";
-var _ = /* @__PURE__ */ l("<span data-floe-surface-part=badge>"), g = /* @__PURE__ */ l("<span class=floe-tag__dot aria-hidden=true>"), $ = /* @__PURE__ */ l("<span class=floe-tag__label>");
+import { spread as i, mergeProps as u, insert as a, memo as n, createComponent as f, Dynamic as p, template as l } from "solid-js/web";
+import { splitProps as d } from "solid-js";
+import { cn as m } from "../../utils/cn.js";
+var g = /* @__PURE__ */ l("<span data-floe-surface-part=badge>"), _ = /* @__PURE__ */ l("<span class=floe-tag__dot aria-hidden=true>"), $ = /* @__PURE__ */ l("<span class=floe-tag__label>");
 function z(s) {
-  const [e, c] = m(s, ["variant", "size", "tone", "icon", "dot", "class", "children"]);
+  const [e, c] = d(s, ["variant", "size", "tone", "icon", "dot", "class", "children"]);
   return (() => {
-    var t = _();
+    var t = g();
     return i(t, u({
       get "data-floe-surface"() {
         return e.tone === "soft" ? "inset" : "raised";
       },
+      get "data-floe-tone"() {
+        return e.tone ?? "solid";
+      },
       get class() {
-        return d("floe-tag", `floe-tag--${e.variant ?? "neutral"}`, `floe-tag--${e.size ?? "md"}`, `floe-tag--${e.tone ?? "solid"}`, e.class);
+        return m("floe-tag", `floe-tag--${e.variant ?? "neutral"}`, `floe-tag--${e.size ?? "md"}`, `floe-tag--${e.tone ?? "solid"}`, e.class);
       }
     }, c), !1, !0), a(t, (() => {
       var r = n(() => !!e.dot);
-      return () => r() && g();
+      return () => r() && _();
     })(), null), a(t, (() => {
       var r = n(() => !!e.icon);
-      return () => r() && p(f, {
+      return () => r() && f(p, {
         get component() {
           return e.icon;
         },