@floegence/floe-webapp-core 0.50.5 → 0.51.0

package/dist/components/ui/Tabs.js

@@ -1,18 +1,18 @@
-import { createComponent as v, spread as ae, mergeProps as de, insert as f, effect as x, className as y, setStyleProperty as ne, memo as oe, use as se, setAttribute as B, template as w, delegateEvents as $e } from "solid-js/web";
-import { splitProps as ce, Show as k, createSignal as L, untrack as le, createEffect as X, For as Ne, onCleanup as ie } from "solid-js";
+import { createComponent as v, spread as de, mergeProps as ce, insert as f, effect as x, className as y, setStyleProperty as ne, memo as se, use as le, setAttribute as k, template as w, delegateEvents as Ne } from "solid-js/web";
+import { splitProps as ue, Show as B, createSignal as L, untrack as ae, createEffect as X, For as Le, onCleanup as ie } from "solid-js";
 import { cn as g } from "../../utils/cn.js";
 import { deferAfterPaint as M } from "../../utils/defer.js";
-import { createUIFirstSelection as Le } from "../../utils/uiFirstSelection.js";
-import { useViewActivation as Re } from "../../context/ViewActivationContext.js";
-import { X as Te, Plus as ze, ChevronRight as Ee } from "../icons/index.js";
-var He = /* @__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">'), Pe = /* @__PURE__ */ w("<div>"), De = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Me = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), Fe = /* @__PURE__ */ w("<div><div role=tablist aria-orientation=horizontal>"), Oe = /* @__PURE__ */ w("<span class=flex-shrink-0>"), We = /* @__PURE__ */ w("<button type=button>"), je = /* @__PURE__ */ w('<div role=tab><span class="truncate max-w-32">'), Ge = /* @__PURE__ */ w("<div role=tabpanel>");
-const q = {
+import { createUIFirstSelection as Re } from "../../utils/uiFirstSelection.js";
+import { useViewActivation as Te } from "../../context/ViewActivationContext.js";
+import { X as ze, Plus as Ee, ChevronRight as He } from "../icons/index.js";
+var Pe = /* @__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">'), De = /* @__PURE__ */ w("<div>"), Me = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Oe = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), We = /* @__PURE__ */ w("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), Fe = /* @__PURE__ */ w("<span class=flex-shrink-0>"), je = /* @__PURE__ */ w("<button type=button>"), Ge = /* @__PURE__ */ w('<div role=tab data-floe-surface-part=tab><span class="truncate max-w-32">'), Ue = /* @__PURE__ */ w("<div role=tabpanel>");
+const V = {
   x: 0,
   width: 0,
   visible: !1
 };
-function Ue(a, e, h) {
-  const d = a.filter((p) => !p.disabled);
+function Xe(i, e, h) {
+  const d = i.filter((p) => !p.disabled);
   if (!d.length) return null;
   const C = d.findIndex((p) => p.id === e);
   if (C < 0) return null;
@@ -37,11 +37,11 @@ function Ue(a, e, h) {
   }
   return d[b]?.id ?? null;
 }
-function Xe(a) {
-  return a === 1 || a === 2 || a === 3 || a === 4 ? a : 2;
+function Ve(i) {
+  return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
 }
-function qe(a) {
-  switch (a) {
+function qe(i) {
+  switch (i) {
     case 1:
       return {
         tabBorderClass: "border-b",
@@ -64,8 +64,8 @@ function qe(a) {
       };
   }
 }
-function Ve(a) {
-  switch (a) {
+function Ke(i) {
+  switch (i) {
     case "border":
       return {
         tabBorderClass: "border-border",
@@ -83,15 +83,15 @@ function Ve(a) {
       };
   }
 }
-const Ke = (a) => (() => {
-  var e = He();
-  return x(() => B(e, "class", a.class)), e;
+const Ye = (i) => (() => {
+  var e = Pe();
+  return x(() => k(e, "class", i.class)), e;
 })();
-function Ye(a) {
+function Je(i) {
   const {
     container: e,
     tab: h
-  } = a, d = h.offsetParent, C = h.offsetWidth;
+  } = i, d = h.offsetParent, C = h.offsetWidth;
   if (d === e && Number.isFinite(h.offsetLeft) && Number.isFinite(C))
     return {
       x: h.offsetLeft,
@@ -105,67 +105,67 @@ function Ye(a) {
     visible: z > 0
   };
 }
-function st(a) {
-  const [e, h] = ce(a, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Xe(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", p = () => 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, ue = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, V = () => qe(C()), F = () => Ve(b());
+function lt(i) {
+  const [e, h] = ue(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Ve(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", p = () => 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, fe = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, q = () => qe(C()), O = () => Ke(b());
   let u;
   const K = (() => {
     try {
-      return Re();
+      return Te();
     } catch {
       return null;
     }
   })(), S = () => K ? K.active() : !0;
-  let O = !1;
-  const [E, W] = L(q), H = /* @__PURE__ */ new Map();
+  let W = !1;
+  const [E, F] = L(V), H = /* @__PURE__ */ new Map();
   let j = !1;
-  const _ = () => d() === "slider", Y = (o) => {
-    if (!u || !_()) return !1;
-    const r = H.get(o);
-    if (!r) return !1;
-    const s = Ye({
+  const P = () => d() === "slider", Y = (n) => {
+    if (!u || !P()) return !1;
+    const o = H.get(n);
+    if (!o) return !1;
+    const l = Je({
       container: u,
-      tab: r
+      tab: o
     });
-    return W(s), s.visible;
-  }, fe = () => {
-    if (!_()) {
-      W(q);
+    return F(l), l.visible;
+  }, ve = () => {
+    if (!P()) {
+      F(V);
       return;
     }
-    Y(G()) || W(q);
-  }, P = () => {
+    Y(G()) || F(V);
+  }, _ = () => {
     j || (j = !0, M(() => {
-      j = !1, le(() => {
-        S() && fe();
+      j = !1, ae(() => {
+        S() && ve();
       });
     }));
-  }, J = () => e.activeId !== void 0, ve = () => e.onChange ?? e.onActiveIdChange, [he, be] = L(le(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = Le({
-    committed: () => J() ? e.activeId : he(),
-    commit: (o) => {
-      J() || be(o), ve()?.(o);
+  }, J = () => e.activeId !== void 0, he = () => e.onChange ?? e.onActiveIdChange, [be, ge] = L(ae(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = Re({
+    committed: () => J() ? e.activeId : be(),
+    commit: (n) => {
+      J() || ge(n), he()?.(n);
     }
   }), G = Q.visual;
   X(() => {
-    S() && (d(), G(), P());
+    S() && (d(), G(), _());
   });
-  const [Z, ge] = L(!1), [ee, me] = L(!1), [we, Ce] = L(!1), te = () => I() === "auto" && we(), pe = () => {
+  const [Z, me] = L(!1), [ee, we] = L(!1), [Ce, pe] = L(!1), te = () => I() === "auto" && Ce(), xe = () => {
     if (!u) return;
     const {
-      scrollLeft: o,
-      scrollWidth: r,
-      clientWidth: s
-    } = u, t = r > s;
-    Ce(t), ge(o > 0), me(o + s < r - 1);
+      scrollLeft: n,
+      scrollWidth: o,
+      clientWidth: l
+    } = u, t = o > l;
+    pe(t), me(n > 0), we(n + l < o - 1);
   }, D = () => {
-    O || (O = !0, M(() => {
-      O = !1, S() && pe();
+    W || (W = !0, M(() => {
+      W = !1, S() && xe();
     }));
-  }, xe = () => {
+  }, ye = () => {
     u && u.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, ye = () => {
+  }, ke = () => {
     u && u.scrollBy({
       left: 150,
       behavior: "smooth"
@@ -173,194 +173,197 @@ function st(a) {
   };
   X(() => {
     if (!u || !S()) return;
-    D(), P();
-    const o = () => D();
-    u.addEventListener("scroll", o);
-    const r = () => {
-      D(), P();
+    D(), _();
+    const n = () => D();
+    u.addEventListener("scroll", n);
+    const o = () => {
+      D(), _();
     };
-    let s;
-    typeof ResizeObserver < "u" ? (s = new ResizeObserver(r), s.observe(u)) : typeof window < "u" && window.addEventListener("resize", r), ie(() => {
-      u?.removeEventListener("scroll", o), s?.disconnect(), typeof window < "u" && window.removeEventListener("resize", r);
+    let l;
+    typeof ResizeObserver < "u" ? (l = new ResizeObserver(o), l.observe(u)) : typeof window < "u" && window.addEventListener("resize", o), ie(() => {
+      u?.removeEventListener("scroll", n), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
     });
   }), X(() => {
-    S() && (e.items.length, D(), P());
+    S() && (e.items.length, D(), _());
   });
-  const U = (o, r) => {
-    r || (Q.request(o), _() && Y(o));
-  }, ke = (o) => {
-    const r = e.items.find((s) => s.id === o);
-    r && (U(r.id, r.disabled), requestAnimationFrame(() => {
-      const s = H.get(r.id);
-      s?.focus(), s?.scrollIntoView({
-        block: "nearest",
-        inline: "nearest"
-      });
-    }));
-  }, Be = (o, r) => {
-    const s = Ue(e.items, r.id, o.key);
-    s && (o.preventDefault(), ke(s));
-  }, Ie = (o, r) => {
-    o.stopPropagation();
-    const s = e.onClose;
-    if (!s) return;
-    const t = r;
-    M(() => s(t));
-  }, Se = {
+  const U = (n, o) => {
+    o || (Q.request(n), P() && Y(n));
+  }, Be = (n) => {
+    const o = e.items.find((t) => t.id === n);
+    if (!o) return;
+    U(o.id, o.disabled);
+    const l = H.get(o.id);
+    l?.focus({
+      preventScroll: !0
+    }), l?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, Ie = (n, o) => {
+    const l = Xe(e.items, o.id, n.key);
+    l && (n.preventDefault(), Be(l));
+  }, Se = (n, o) => {
+    n.stopPropagation();
+    const l = e.onClose;
+    if (!l) return;
+    const t = o;
+    M(() => l(t));
+  }, Ae = {
     sm: "h-7 px-2 text-[11px]",
     md: "h-8 px-3 text-xs"
-  }, Ae = (o, r) => {
-    const s = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", t = r ? "cursor-not-allowed opacity-50" : "cursor-pointer", n = (() => {
+  }, $e = (n, o) => {
+    const l = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", t = o ? "cursor-not-allowed opacity-50" : "cursor-pointer", r = (() => {
       const c = d();
-      return c === "none" || c === "slider" && E().visible ? "border-transparent" : F().tabBorderClass;
+      return c === "none" || c === "slider" && E().visible ? "border-transparent" : O().tabBorderClass;
     })();
-    return g(s, t, Se[e.size ?? "md"], "rounded-t", V().tabBorderClass, o ? g(n, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), r && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
+    return g(l, t, Ae[e.size ?? "md"], "rounded-t", q().tabBorderClass, n ? 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 (() => {
-    var o = Fe(), r = o.firstChild;
-    ae(o, de({
+    var n = We(), o = n.firstChild;
+    de(n, ce({
       get class() {
         return g("relative flex items-center gap-0.5", R() && "border-b border-border", e.slotClassNames?.root, e.class);
       }
-    }, h), !1, !0), f(o, v(k, {
+    }, h), !1, !0), f(n, v(B, {
       get when() {
         return te();
       },
       get children() {
         var t = _e();
-        return t.$$click = xe, f(t, v(Ke, {
+        return t.$$click = ye, f(t, v(Ye, {
           class: "w-4 h-4"
-        })), x((n) => {
-          var c = !Z(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", Z() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
-          return c !== n.e && (t.disabled = n.e = c), i !== n.t && y(t, n.t = i), n;
+        })), x((r) => {
+          var c = !Z(), a = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", 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), a !== r.t && y(t, r.t = a), r;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), r);
-    var s = u;
-    return typeof s == "function" ? se(s, r) : u = r, f(r, v(k, {
+    }), o);
+    var l = u;
+    return typeof l == "function" ? le(l, o) : u = o, f(o, v(B, {
       get when() {
-        return oe(() => !!_())() && E().visible;
+        return se(() => !!P())() && E().visible;
       },
       get children() {
-        var t = Pe();
-        return x((n) => {
-          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", V().sliderHeightClass, F().sliderBgClass, p() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), i = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
-          return c !== n.e && y(t, n.e = c), i !== n.t && ne(t, "transform", n.t = i), A !== n.a && ne(t, "width", n.a = A), n;
+        var t = De();
+        return x((r) => {
+          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", q().sliderHeightClass, O().sliderBgClass, p() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), a = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
+          return c !== r.e && y(t, r.e = c), a !== r.t && ne(t, "transform", r.t = a), A !== r.a && ne(t, "width", r.a = A), r;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), t;
       }
-    }), null), f(r, v(Ne, {
+    }), null), f(o, v(Le, {
       get each() {
         return e.items;
       },
       children: (t) => {
-        const n = () => t.id === G(), c = () => t.closable ?? z();
+        const r = () => t.id === G(), c = () => t.closable ?? z();
         return (() => {
-          var i = je(), A = i.firstChild;
-          return i.$$keydown = (l) => {
-            if (l.key === "Enter" || l.key === " ") {
-              l.preventDefault(), U(t.id, t.disabled);
+          var a = Ge(), A = a.firstChild;
+          return a.$$keydown = (s) => {
+            if (s.key === "Enter" || s.key === " ") {
+              s.preventDefault(), U(t.id, t.disabled);
               return;
             }
-            Be(l, t);
-          }, i.$$click = () => U(t.id, t.disabled), se((l) => {
-            H.set(t.id, l), ie(() => H.delete(t.id));
-          }, i), f(i, v(k, {
+            Ie(s, t);
+          }, a.$$click = () => U(t.id, t.disabled), le((s) => {
+            H.set(t.id, s), ie(() => H.delete(t.id));
+          }, a), f(a, v(B, {
             get when() {
               return t.icon;
             },
             get children() {
-              var l = Oe();
-              return f(l, () => t.icon), l;
+              var s = Fe();
+              return f(s, () => t.icon), s;
             }
-          }), A), f(A, () => t.label), f(i, v(k, {
+          }), A), f(A, () => t.label), f(a, v(B, {
             get when() {
-              return oe(() => !!c())() && !t.disabled;
+              return se(() => !!c())() && !t.disabled;
             },
             get children() {
-              var l = We();
-              return l.$$click = (m) => Ie(m, t.id), f(l, v(Te, {
+              var s = je();
+              return s.$$click = (m) => Se(m, t.id), f(s, v(ze, {
                 class: "w-3 h-3"
               })), x((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-150", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t.label}`;
-                return $ !== m.e && y(l, m.e = $), N !== m.t && B(l, "aria-label", m.t = N), m;
+                return $ !== m.e && y(s, m.e = $), N !== m.t && k(s, "aria-label", m.t = N), m;
               }, {
                 e: void 0,
                 t: void 0
-              }), l;
+              }), s;
             }
-          }), null), x((l) => {
-            var m = Ae(n(), t.disabled), $ = n(), N = t.disabled, re = t.disabled ? -1 : n() ? 0 : -1;
-            return m !== l.e && y(i, l.e = m), $ !== l.t && B(i, "aria-selected", l.t = $), N !== l.a && B(i, "aria-disabled", l.a = N), re !== l.o && B(i, "tabindex", l.o = re), l;
+          }), null), x((s) => {
+            var m = $e(r(), t.disabled), $ = r() ? "raised" : "flat", N = r(), re = t.disabled, oe = t.disabled ? -1 : r() ? 0 : -1;
+            return m !== s.e && y(a, s.e = m), $ !== s.t && k(a, "data-floe-surface", s.t = $), N !== s.a && k(a, "aria-selected", s.a = N), re !== s.o && k(a, "aria-disabled", s.o = re), oe !== s.i && k(a, "tabindex", s.i = oe), s;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
-            o: void 0
-          }), i;
+            o: void 0,
+            i: void 0
+          }), a;
         })();
       }
-    }), null), f(o, v(k, {
+    }), null), f(n, v(B, {
       get when() {
-        return ue();
+        return fe();
       },
       get children() {
-        var t = De();
+        var t = Me();
         return t.$$click = () => {
-          const n = e.onAdd;
-          n && M(() => n());
-        }, f(t, v(ze, {
+          const r = e.onAdd;
+          r && M(() => r());
+        }, f(t, v(Ee, {
           get class() {
             return e.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
         })), x(() => y(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-150", e.size === "sm" ? "w-6 h-6" : "w-7 h-7", e.slotClassNames?.addButton))), t;
       }
-    }), null), f(o, v(k, {
+    }), null), f(n, v(B, {
       get when() {
         return te();
       },
       get children() {
-        var t = Me();
-        return t.$$click = ye, f(t, v(Ee, {
+        var t = Oe();
+        return t.$$click = ke, f(t, v(He, {
           class: "w-4 h-4"
-        })), x((n) => {
-          var c = !ee(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", ee() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
-          return c !== n.e && (t.disabled = n.e = c), i !== n.t && y(t, n.t = i), n;
+        })), x((r) => {
+          var c = !ee(), a = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", 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), a !== r.t && y(t, r.t = a), r;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
     }), null), x((t) => {
-      var n = g(
+      var r = g(
         "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 n !== t.e && y(r, t.e = n), c !== t.t && B(r, "aria-label", t.t = c), t;
+      return r !== t.e && y(o, t.e = r), c !== t.t && k(o, "aria-label", t.t = c), t;
     }, {
       e: void 0,
       t: void 0
-    }), o;
+    }), n;
   })();
 }
-function lt(a) {
-  const [e, h] = ce(a, ["active", "keepMounted", "labelledBy", "class", "children"]);
-  return v(k, {
+function at(i) {
+  const [e, h] = ue(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
+  return v(B, {
     get when() {
       return e.keepMounted || e.active;
     },
     get children() {
-      var d = Ge();
-      return ae(d, de({
+      var d = Ue();
+      return de(d, ce({
         get "aria-labelledby"() {
           return e.labelledBy;
         },
@@ -377,9 +380,9 @@ function lt(a) {
     }
   });
 }
-$e(["click", "keydown"]);
+Ne(["click", "keydown"]);
 export {
-  lt as TabPanel,
-  st as Tabs,
-  Ue as resolveTabNavigationTargetId
+  at as TabPanel,
+  lt as Tabs,
+  Xe as resolveTabNavigationTargetId
 };

package/dist/components/ui/Tag.js

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

package/dist/components/ui/Tooltip.js

@@ -2,9 +2,9 @@ import { insert as i, createComponent as T, effect as $, className as v, setAttr
 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><div>"), z = /* @__PURE__ */ h('<div class="relative inline-block">');
+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, n] = C(!1), a = P({
+  const [x, a] = C(!1), n = P({
     open: x,
     exitDurationMs: 80
   });
@@ -16,12 +16,12 @@ function N(o) {
     e && clearTimeout(e);
     const t = o.delay ?? 300;
     if (t <= 0) {
-      n(!0);
+      a(!0);
       return;
     }
-    e = setTimeout(() => n(!0), t);
+    e = setTimeout(() => a(!0), t);
   }, d = () => {
-    e && (clearTimeout(e), e = void 0), n(!1);
+    e && (clearTimeout(e), e = void 0), a(!1);
   }, y = {
     top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
     bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
@@ -37,13 +37,13 @@ function N(o) {
     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, {
       get when() {
-        return a.mounted();
+        return n.mounted();
       },
       get children() {
-        var l = k(), u = l.firstChild;
-        return i(l, () => o.content, u), $((r) => {
-          var f = g("absolute z-50 px-2 py-1", "bg-popover text-popover-foreground text-xs rounded shadow-md", "whitespace-nowrap", "floe-floating-presence floe-floating-tooltip", y[o.placement ?? "top"], o.class), p = a.state(), c = a.exiting() ? "true" : void 0, m = g("absolute w-0 h-0 border-4", w[o.placement ?? "top"]);
-          return f !== r.e && v(l, r.e = f), 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(u, r.o = m), r;
+        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-xs rounded shadow-md", "whitespace-nowrap", "floe-floating-presence floe-floating-tooltip", y[o.placement ?? "top"], o.class), c = n.state(), p = 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), c !== r.t && b(l, "data-floating-presence", r.t = c), p !== r.a && b(l, "aria-hidden", r.a = p), m !== r.o && v(f, r.o = m), r;
         }, {
           e: void 0,
           t: void 0,