@floegence/floe-webapp-core 0.88.0 → 0.89.1

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

@@ -6,6 +6,10 @@ export interface TabItem {
     domId?: string;
     /** DOM identity of the host-owned panel controlled by this tab. */
     panelId?: string;
+    /** Full identity shown when the visible label is truncated. */
+    title?: string;
+    /** Localized accessible close action for this item. */
+    closeLabel?: string;
     icon?: JSX.Element;
     closable?: boolean;
     disabled?: boolean;
@@ -83,6 +87,10 @@ export interface TabsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onC
     slotClassNames?: TabsSlotClassNames;
     /** Accessible name for the tablist container. */
     ariaLabel?: string;
+    labels?: {
+        scrollLeft: string;
+        scrollRight: string;
+    };
 }
 export declare function resolveTabNavigationTargetId(items: Pick<TabItem, 'id' | 'disabled'>[], currentId: string, key: string): string | null;
 export declare function Tabs(props: TabsProps): JSX.Element;

package/dist/components/ui/Tabs.js

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

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

@@ -0,0 +1,3 @@
+import { type TabsProps } from './Tabs';
+/** Compact document identity for a window header. Hosts own documents and close policy. */
+export declare function WindowTabs(props: TabsProps): import("solid-js").JSX.Element;