@floegence/floe-webapp-core 0.86.58 → 0.86.62

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 { createComponent as v, spread as ue, mergeProps as fe, insert as f, effect as y, className as x, 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 ce, createEffect as U, onCleanup as de } from "solid-js";
+import { cn as h } 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 { 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__ */ 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 data-floe-interactive=icon aria-label="Scroll left">'), Oe = /* @__PURE__ */ w("<div>"), We = /* @__PURE__ */ w('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), Fe = /* @__PURE__ */ w('<button type=button data-floe-interactive=icon aria-label="Scroll right">'), je = /* @__PURE__ */ w("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), qe = /* @__PURE__ */ w("<span class=flex-shrink-0>"), Ge = /* @__PURE__ */ w("<button type=button data-floe-interactive=icon>"), Ue = /* @__PURE__ */ w('<div role=tab data-floe-surface-part=tab data-floe-interactive=item><span class="truncate max-w-32">'), Xe = /* @__PURE__ */ w("<div role=tabpanel>");
+const X = {
   x: 0,
   width: 0,
   visible: !1
 };
-function Ve(i, e, h) {
-  const d = i.filter((x) => !x.disabled);
-  if (!d.length) return null;
-  const C = d.findIndex((x) => x.id === e);
+function Ke(i, e, b) {
+  const c = i.filter((k) => !k.disabled);
+  if (!c.length) return null;
+  const C = c.findIndex((k) => k.id === e);
   if (C < 0) return null;
-  let b = null;
-  switch (h) {
+  let g = null;
+  switch (b) {
     case "ArrowRight":
     case "ArrowDown":
-      b = (C + 1) % d.length;
+      g = (C + 1) % c.length;
       break;
     case "ArrowLeft":
     case "ArrowUp":
-      b = (C - 1 + d.length) % d.length;
+      g = (C - 1 + c.length) % c.length;
       break;
     case "Home":
-      b = 0;
+      g = 0;
       break;
     case "End":
-      b = d.length - 1;
+      g = c.length - 1;
       break;
     default:
       return null;
   }
-  return d[b]?.id ?? null;
+  return c[g]?.id ?? null;
 }
-function qe(i) {
+function Ve(i) {
   return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
 }
 function Ye(i) {
@@ -69,18 +69,18 @@ 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)]"
       };
   }
 }
@@ -91,35 +91,35 @@ const Qe = (i) => (() => {
 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))
+    tab: b
+  } = i, c = b.offsetParent, C = b.offsetWidth;
+  if (c === e && Number.isFinite(b.offsetLeft) && Number.isFinite(C))
     return {
-      x: h.offsetLeft,
+      x: b.offsetLeft,
       width: C,
       visible: C > 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 = e.getBoundingClientRect(), k = b.getBoundingClientRect(), R = e.offsetWidth || e.clientWidth, I = g.width > 0 && R > 0 ? g.width / R : 1, T = Number.isFinite(I) && I > 0 ? I : 1, z = k.width / T;
   return {
-    x: (x.left - b.left + e.scrollLeft) / T,
+    x: (k.left - g.left + e.scrollLeft) / T,
     width: z,
     visible: z > 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());
+function ct(i) {
+  const [e, b] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), c = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Ve(e.features?.indicator?.thicknessPx), g = () => e.features?.indicator?.colorToken ?? "primary", k = () => 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, K = () => Ye(C()), O = () => Je(g());
   let u;
-  const q = (() => {
+  const V = (() => {
     try {
       return Ee();
     } catch {
       return null;
     }
-  })(), S = () => q ? q.active() : !0;
+  })(), S = () => V ? V.active() : !0;
   let W = !1;
-  const [E, F] = L(K), H = /* @__PURE__ */ new Map();
+  const [E, F] = L(X), H = /* @__PURE__ */ new Map();
   let j = !1;
-  const P = () => d() === "slider", Y = (s) => {
+  const P = () => c() === "slider", Y = (s) => {
     if (!u || !P()) return !1;
     const o = H.get(s);
     if (!o) return !1;
@@ -130,26 +130,26 @@ function dt(i) {
     return F(a), a.visible;
   }, be = () => {
     if (!P()) {
-      F(K);
+      F(X);
       return;
     }
-    Y(G()) || F(K);
+    Y(q()) || F(X);
   }, D = () => {
     j || (j = !0, _(() => {
-      j = !1, de(() => {
+      j = !1, ce(() => {
         S() && be();
       });
     }));
-  }, J = () => e.activeId !== void 0, ge = () => e.onChange ?? e.onActiveIdChange, [me, we] = L(de(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = ze({
+  }, J = () => e.activeId !== void 0, ge = () => e.onChange ?? e.onActiveIdChange, [me, we] = L(ce(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = ze({
     committed: () => J() ? e.activeId : me(),
     commit: (s) => {
       J() || we(s), ge()?.(s);
     }
-  }), G = Q.visual;
-  X(() => {
-    S() && (d(), G(), D());
+  }), q = Q.visual;
+  U(() => {
+    S() && (c(), q(), D());
   });
-  const [Z, Ce] = L(!1), [ee, pe] = L(!1), [xe, ye] = L(!1), te = () => I() === "auto" && xe(), ke = () => {
+  const [Z, Ce] = L(!1), [ee, pe] = L(!1), [ke, ye] = L(!1), te = () => I() === "auto" && ke(), xe = () => {
     if (!u) return;
     const {
       scrollLeft: s,
@@ -159,7 +159,7 @@ function dt(i) {
     ye(t), Ce(s > 0), pe(s + a < o - 1);
   }, M = () => {
     W || (W = !0, _(() => {
-      W = !1, S() && ke();
+      W = !1, S() && xe();
     }));
   }, Be = () => {
     u && u.scrollBy({
@@ -172,7 +172,7 @@ function dt(i) {
       behavior: "smooth"
     });
   };
-  X(() => {
+  U(() => {
     if (!u || !S()) return;
     M(), D();
     const s = () => M();
@@ -181,18 +181,18 @@ function dt(i) {
       M(), D();
     };
     let a;
-    typeof ResizeObserver < "u" ? (a = new ResizeObserver(o), a.observe(u)) : typeof window < "u" && window.addEventListener("resize", o), ce(() => {
+    typeof ResizeObserver < "u" ? (a = new ResizeObserver(o), a.observe(u)) : typeof window < "u" && window.addEventListener("resize", o), de(() => {
       u?.removeEventListener("scroll", s), a?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
     });
-  }), X(() => {
+  }), U(() => {
     S() && (e.items.length, M(), D());
   });
-  const U = (s, o) => {
+  const G = (s, o) => {
     o || (Q.request(s), P() && Y(s));
   }, Se = (s) => {
     const o = e.items.find((t) => t.id === s);
     if (!o) return;
-    U(o.id, o.disabled);
+    G(o.id, o.disabled);
     const a = H.get(o.id);
     a?.focus({
       preventScroll: !0
@@ -201,7 +201,7 @@ function dt(i) {
       inline: "nearest"
     });
   }, Ae = (s, o) => {
-    const a = Ve(e.items, o.id, s.key);
+    const a = Ke(e.items, o.id, s.key);
     a && (s.preventDefault(), Se(a));
   }, $e = (s, o) => {
     s.stopPropagation();
@@ -210,22 +210,34 @@ function dt(i) {
     const t = o;
     _(() => a(t));
   }, Ne = {
-    sm: "h-7 px-2 text-[11px]",
-    md: "h-8 px-3 text-xs"
+    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, 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 c = d();
-      return c === "none" || c === "slider" && E().visible ? "border-transparent" : O().tabBorderClass;
+    const a = h("inline-flex items-center gap-1.5 whitespace-nowrap", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), t = o ? "cursor-not-allowed opacity-50" : "cursor-pointer", r = (() => {
+      const d = c();
+      return d === "none" || d === "slider" && E().visible ? "border-transparent" : O().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,
+      t,
+      Ne[e.size ?? "md"],
+      "rounded-control",
+      K().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(r, "text-foreground", e.slotClassNames?.tabActive) : h("border-transparent text-[var(--floe-ink-soft)]", e.slotClassNames?.tabInactive),
+      o && "opacity-50",
+      e.slotClassNames?.tab
+    );
   };
   return (() => {
     var s = je(), o = 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("relative flex items-center gap-0.5", R() && "border-b border-[var(--floe-line)]", e.slotClassNames?.root, e.class);
       }
-    }, h), !1, !0), f(s, v(B, {
+    }, b), !1, !0), f(s, v(B, {
       get when() {
         return te();
       },
@@ -234,8 +246,8 @@ function dt(i) {
         return t.$$click = Be, f(t, 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;
+          var d = !Z(), l = h("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded-control cursor-pointer", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", Z() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
+          return d !== r.e && (t.disabled = r.e = d), l !== r.t && x(t, r.t = l), r;
         }, {
           e: void 0,
           t: void 0
@@ -250,8 +262,8 @@ function dt(i) {
       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 d = h("pointer-events-none absolute bottom-0 left-0 z-10", K().sliderHeightClass, O().sliderBgClass, k() ? "transition-[transform,width] duration-[var(--floe-duration-base)] 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 d !== r.e && x(t, r.e = d), l !== r.t && ae(t, "transform", r.t = l), A !== r.a && ae(t, "width", r.a = A), r;
         }, {
           e: void 0,
           t: void 0,
@@ -264,36 +276,36 @@ function dt(i) {
       },
       by: (t) => t.id,
       children: (t) => {
-        const r = () => t().id === G(), c = () => t().closable ?? z();
+        const r = () => t().id === q(), d = () => t().closable ?? z();
         return (() => {
-          var l = Xe(), A = l.firstChild;
+          var l = Ue(), A = l.firstChild;
           return l.$$keydown = (n) => {
             if (n.key === "Enter" || n.key === " ") {
-              n.preventDefault(), U(t().id, t().disabled);
+              n.preventDefault(), G(t().id, t().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.$$click = () => G(t().id, t().disabled), ie((n) => {
+            H.set(t().id, n), de(() => H.delete(t().id));
           }, l), f(l, v(B, {
             get when() {
               return t().icon;
             },
             get children() {
-              var n = Ge();
+              var n = qe();
               return f(n, () => t().icon), n;
             }
           }), A), f(A, () => t().label), f(l, v(B, {
             get when() {
-              return le(() => !!c())() && !t().disabled;
+              return le(() => !!d())() && !t().disabled;
             },
             get children() {
-              var n = Ue();
+              var n = Ge();
               return n.$$click = (m) => $e(m, t().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;
+                var $ = h("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", T() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t().label}`;
+                return $ !== m.e && x(n, m.e = $), N !== m.t && p(n, "aria-label", m.t = N), m;
               }, {
                 e: void 0,
                 t: void 0
@@ -301,7 +313,7 @@ function dt(i) {
             }
           }), 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;
+            return m !== n.e && x(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;
           }, {
             e: void 0,
             t: void 0,
@@ -326,7 +338,7 @@ function dt(i) {
           get class() {
             return e.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;
+        })), y(() => x(t, h("flex-shrink-0 flex items-center justify-center", "rounded-control cursor-pointer", "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)]", e.size === "sm" ? "w-6 h-6" : "w-7 h-7", e.slotClassNames?.addButton))), t;
       }
     }), null), f(s, v(B, {
       get when() {
@@ -337,37 +349,37 @@ function dt(i) {
         return t.$$click = Ie, f(t, 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;
+          var d = !ee(), l = h("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded-control cursor-pointer", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", ee() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
+          return d !== r.e && (t.disabled = r.e = d), l !== r.t && x(t, r.t = l), r;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
     }), null), y((t) => {
-      var r = g(
+      var r = 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;
+      ), d = e.ariaLabel;
+      return r !== t.e && x(o, t.e = r), d !== t.t && p(o, "aria-label", t.t = d), t;
     }, {
       e: void 0,
       t: void 0
     }), s;
   })();
 }
-function ct(i) {
-  const [e, h] = ve(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
+function dt(i) {
+  const [e, b] = ve(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
   return v(B, {
     get when() {
       return e.keepMounted || e.active;
     },
     get children() {
-      var d = Ke();
-      return ue(d, fe({
+      var c = Xe();
+      return ue(c, fe({
         get "aria-labelledby"() {
           return e.labelledBy;
         },
@@ -378,15 +390,15 @@ function ct(i) {
           return e.active ? 0 : -1;
         },
         get class() {
-          return g(!e.active && e.keepMounted && "hidden", e.class);
+          return h(!e.active && e.keepMounted && "hidden", e.class);
         }
-      }, h), !1, !0), f(d, () => e.children), d;
+      }, b), !1, !0), f(c, () => e.children), c;
     }
   });
 }
 Re(["click", "keydown"]);
 export {
-  ct as TabPanel,
-  dt as Tabs,
-  Ve as resolveTabNavigationTargetId
+  dt as TabPanel,
+  ct as Tabs,
+  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;
         },

package/dist/components/ui/Tooltip.js

@@ -1,60 +1,60 @@
-import { insert as i, createComponent as T, effect as $, className as v, setAttribute as b, template as h, delegateEvents as S } from "solid-js/web";
-import { createSignal as C, onCleanup as E, Show as L } from "solid-js";
-import { cn as g } from "../../utils/cn.js";
-import { createFloatingPresence as P } from "./floatingPresence.js";
-var k = /* @__PURE__ */ h("<div role=tooltip data-floe-surface=floating><div>"), z = /* @__PURE__ */ h('<div class="relative inline-block">');
-function N(o) {
-  const [x, a] = C(!1), n = P({
-    open: x,
-    exitDurationMs: 80
+import { insert as s, createComponent as S, effect as k, className as g, setAttribute as h, template as x, use as C, delegateEvents as E } from "solid-js/web";
+import { createSignal as L, onCleanup as P, Show as _ } from "solid-js";
+import { cn as y } from "../../utils/cn.js";
+import { createFloatingPresence as z } from "./floatingPresence.js";
+var A = /* @__PURE__ */ x("<div role=tooltip data-floe-surface=floating><div>"), F = /* @__PURE__ */ x('<div class="relative inline-block">');
+function q(l) {
+  const [w, a] = L(!1), n = z({
+    open: w,
+    element: () => i
   });
-  let e;
-  E(() => {
-    e && (clearTimeout(e), e = void 0);
+  let i, t;
+  P(() => {
+    t && (clearTimeout(t), t = void 0);
   });
-  const s = () => {
-    e && clearTimeout(e);
-    const t = o.delay ?? 300;
-    if (t <= 0) {
+  const f = () => {
+    t && clearTimeout(t);
+    const e = l.delay ?? 300;
+    if (e <= 0) {
       a(!0);
       return;
     }
-    e = setTimeout(() => a(!0), t);
+    t = setTimeout(() => a(!0), e);
   }, d = () => {
-    e && (clearTimeout(e), e = void 0), a(!1);
-  }, y = {
+    t && (clearTimeout(t), t = void 0), a(!1);
+  }, $ = {
     top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
     bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
     left: "right-full top-1/2 -translate-y-1/2 mr-2",
     right: "left-full top-1/2 -translate-y-1/2 ml-2"
-  }, w = {
+  }, T = {
     top: "top-full left-1/2 -translate-x-1/2 border-t-popover border-x-transparent border-b-transparent",
     bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-popover border-x-transparent border-t-transparent",
     left: "left-full top-1/2 -translate-y-1/2 border-l-popover border-y-transparent border-r-transparent",
     right: "right-full top-1/2 -translate-y-1/2 border-r-popover border-y-transparent border-l-transparent"
   };
   return (() => {
-    var t = z();
-    return t.$$focusout = d, t.$$focusin = s, t.addEventListener("mouseleave", d), t.addEventListener("mouseenter", s), i(t, () => o.children, null), i(t, T(L, {
+    var e = F();
+    return e.$$focusout = d, e.$$focusin = f, e.addEventListener("mouseleave", d), e.addEventListener("mouseenter", f), s(e, () => l.children, null), s(e, S(_, {
       get when() {
         return n.mounted();
       },
       get children() {
-        var l = k(), f = l.firstChild;
-        return i(l, () => o.content, f), $((r) => {
-          var u = g("absolute z-50 px-2 py-1", "bg-popover text-popover-foreground text-[11px] rounded-md shadow-md", "whitespace-nowrap", "floe-floating-presence floe-floating-tooltip", y[o.placement ?? "top"], o.class), p = n.state(), c = n.exiting() ? "true" : void 0, m = g("absolute w-0 h-0 border-4", w[o.placement ?? "top"]);
-          return u !== r.e && v(l, r.e = u), p !== r.t && b(l, "data-floating-presence", r.t = p), c !== r.a && b(l, "aria-hidden", r.a = c), m !== r.o && v(f, r.o = m), r;
+        var o = A(), u = o.firstChild, p = i;
+        return typeof p == "function" ? C(p, o) : i = o, s(o, () => l.content, u), k((r) => {
+          var c = y("absolute z-50 px-2.5 py-1.5", "bg-popover text-popover-foreground text-[length:var(--floe-type-caption)]", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "tracking-[var(--floe-tracking-normal)]", "whitespace-nowrap", "floe-floating-presence floe-floating-tooltip", $[l.placement ?? "top"], l.class), v = n.state(), m = n.exiting() ? "true" : void 0, b = y("absolute w-0 h-0 border-4", T[l.placement ?? "top"]);
+          return c !== r.e && g(o, r.e = c), v !== r.t && h(o, "data-floating-presence", r.t = v), m !== r.a && h(o, "aria-hidden", r.a = m), b !== r.o && g(u, r.o = b), r;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0
-        }), l;
+        }), o;
       }
-    }), null), t;
+    }), null), e;
   })();
 }
-S(["focusin", "focusout"]);
+E(["focusin", "focusout"]);
 export {
-  N as Tooltip
+  q as Tooltip
 };

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

@@ -2,6 +2,13 @@ import { type Accessor } from 'solid-js';
 export type FloatingPresenceState = 'entering' | 'open' | 'exiting';
 export interface FloatingPresenceOptions {
     open: Accessor<boolean>;
+    /**
+     * The element carrying the surface's motion classes. When present, the exit
+     * follows that element's own transitions, so the DOM outlives the motion CSS
+     * declared for it instead of a duration duplicated in JavaScript.
+     */
+    element?: Accessor<HTMLElement | undefined>;
+    /** Fallback for elements with no observable transition, as in SSR and unit tests. */
     exitDurationMs?: number;
     reducedMotionExitDurationMs?: number;
 }