@floegence/floe-webapp-core 0.35.21 → 0.35.22

package/dist/components/ui/Tabs.js

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

package/dist/context/FloeConfigContext.d.ts

@@ -86,6 +86,22 @@ export interface FloeThemeConfig {
      */
     tokens?: FloeThemeTokenOverrides;
 }
+export interface FloeAccessibilityConfig {
+    /** Stable id applied to the primary `<main>` region for skip-link targeting. */
+    mainContentId: string;
+    /** Visible-on-focus label for the shell skip link. */
+    skipLinkLabel: string;
+    /** Accessible name for the shell top bar landmark. */
+    topBarLabel: string;
+    /** Accessible name for the desktop activity/navigation landmark. */
+    primaryNavigationLabel: string;
+    /** Accessible name for the mobile tab navigation landmark. */
+    mobileNavigationLabel: string;
+    /** Accessible name for the shared sidebar/complementary region. */
+    sidebarLabel: string;
+    /** Accessible name for the primary application content region. */
+    mainLabel: string;
+}
 export interface FloeDeckConfig {
     storageKey: string;
     /**
@@ -152,6 +168,7 @@ export interface FloeConfig {
     commands: FloeCommandsConfig;
     layout: FloeLayoutConfig;
     theme: FloeThemeConfig;
+    accessibility: FloeAccessibilityConfig;
     deck: FloeDeckConfig;
     strings: FloeStrings;
 }