@floegence/floe-webapp-core 0.35.21 → 0.35.22

package/dist/components/file-browser/Breadcrumb.js

@@ -1,106 +1,106 @@
-import { insert as R, createComponent as a, memo as A, effect as b, className as x, template as W, use as H, delegateEvents as P } from "solid-js/web";
-import { createSignal as y, onMount as B, createMemo as M, For as O, Show as T, onCleanup as F } from "solid-js";
-import { cn as C } from "../../utils/cn.js";
+import { insert as E, createComponent as a, memo as $, effect as D, className as L, template as b, use as H, delegateEvents as P } from "solid-js/web";
+import { createSignal as B, onMount as y, createMemo as I, For as O, Show as k, onCleanup as F } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
 import { useFileBrowser as G } from "./FileBrowserContext.js";
-import { ChevronRight as E } from "../icons/index.js";
+import { ChevronRight as M } from "../icons/index.js";
 import { Dropdown as z } from "../ui/Dropdown.js";
-var X = /* @__PURE__ */ W("<nav aria-label=Breadcrumb>"), j = /* @__PURE__ */ W('<button type=button title="Show hidden path segments">…'), q = /* @__PURE__ */ W('<button type=button><span class="truncate max-w-[120px] block">');
-const p = 16, J = 28, D = 12, K = 7, Q = 120, U = 100;
-function V(r) {
-  const n = r.length * K;
-  return Math.min(n + D, Q + D);
+var X = /* @__PURE__ */ b("<nav aria-label=Breadcrumb>"), j = /* @__PURE__ */ b("<span>…"), q = /* @__PURE__ */ b('<button type=button><span class="truncate max-w-[120px] block">');
+const p = 16, J = 28, T = 12, K = 7, Q = 120, U = 100;
+function V(n) {
+  const t = n.length * K;
+  return Math.min(t + T, Q + T);
 }
-function ce(r) {
-  const n = G();
-  let s;
-  const [t, c] = y(0);
-  B(() => {
-    if (!s) return;
+function ce(n) {
+  const t = G();
+  let o;
+  const [r, c] = B(0);
+  y(() => {
+    if (!o) return;
     const e = () => {
-      s && c(s.offsetWidth);
+      o && c(o.offsetWidth);
     };
     e();
-    const o = new ResizeObserver(e);
-    o.observe(s), F(() => o.disconnect());
+    const s = new ResizeObserver(e);
+    s.observe(o), F(() => s.disconnect());
   });
-  const d = M(() => {
-    const e = n.currentPath(), o = n.homeLabel();
+  const h = I(() => {
+    const e = t.currentPath(), s = t.homeLabel();
     if (e === "/" || e === "")
       return [{
-        name: o,
+        name: s,
         path: "/"
       }];
     const l = e.split("/").filter(Boolean), i = [{
-      name: o,
+      name: s,
       path: "/"
     }];
-    let f = "";
-    for (const g of l)
-      f += "/" + g, i.push({
-        name: g,
-        path: f
+    let g = "";
+    for (const f of l)
+      g += "/" + f, i.push({
+        name: f,
+        path: g
       });
     return i;
-  }), m = M(() => {
-    const e = d(), o = t();
-    if (o < U || e.length <= 2)
+  }), m = I(() => {
+    const e = h(), s = r();
+    if (s < U || e.length <= 2)
       return {
         collapsed: [],
         visible: e,
         shouldCollapse: !1
       };
-    const l = e.map((u) => V(u.name)), i = l[0], f = l[e.length - 1], g = p, $ = e.length > 1 ? p : 0, _ = i + f + g + $;
-    if (_ > o && e.length > 2)
+    const l = e.map((d) => V(d.name)), i = l[0], g = l[e.length - 1], f = p, R = e.length > 1 ? p : 0, C = i + g + f + R;
+    if (C > s && e.length > 2)
       return {
         collapsed: e.slice(1, -1),
         visible: [e[0], e[e.length - 1]],
         shouldCollapse: !0
       };
-    const h = e.slice(1, -1), v = [];
-    let w = o - _;
-    const L = h.length > 0 ? J + p : 0;
-    for (let u = h.length - 1; u >= 0; u--) {
-      const k = l[u + 1] + p, N = u > 0 ? L : 0;
-      if (w - N >= k)
-        v.unshift(h[u]), w -= k;
+    const u = e.slice(1, -1), v = [];
+    let S = s - C;
+    const A = u.length > 0 ? J + p : 0;
+    for (let d = u.length - 1; d >= 0; d--) {
+      const _ = l[d + 1] + p, N = d > 0 ? A : 0;
+      if (S - N >= _)
+        v.unshift(u[d]), S -= _;
       else
         break;
     }
-    const I = h.slice(0, h.length - v.length);
+    const w = u.slice(0, u.length - v.length);
     return {
-      collapsed: I,
+      collapsed: w,
       visible: [e[0], ...v, e[e.length - 1]],
-      shouldCollapse: I.length > 0
+      shouldCollapse: w.length > 0
     };
-  }), S = (e) => {
-    n.setCurrentPath(e.path);
+  }), W = (e) => {
+    t.setCurrentPath(e.path);
   };
   return (() => {
-    var e = X(), o = s;
-    return typeof o == "function" ? H(o, e) : s = e, R(e, a(O, {
+    var e = X(), s = o;
+    return typeof s == "function" ? H(s, e) : o = e, E(e, a(O, {
       get each() {
         return m().visible;
       },
-      children: (l, i) => [a(T, {
+      children: (l, i) => [a(k, {
         get when() {
           return i() > 0;
         },
         get children() {
-          return a(E, {
+          return a(M, {
             class: "w-3 h-3 text-muted-foreground/50 flex-shrink-0"
           });
         }
-      }), a(T, {
+      }), a(k, {
         get when() {
-          return A(() => !!m().shouldCollapse)() && i() === 1;
+          return $(() => !!m().shouldCollapse)() && i() === 1;
         },
         get children() {
           return [a(Y, {
             get segments() {
               return m().collapsed;
             },
-            onSelect: S
-          }), a(E, {
+            onSelect: W
+          }), a(M, {
             class: "w-3 h-3 text-muted-foreground/50 flex-shrink-0"
           })];
         }
@@ -109,43 +109,44 @@ function ce(r) {
         get isLast() {
           return i() === m().visible.length - 1;
         },
-        onClick: () => S(l)
+        onClick: () => W(l)
       })]
-    })), b(() => x(e, C("flex items-center gap-1 min-w-0 overflow-hidden", r.class))), e;
+    })), D(() => L(e, x("flex items-center gap-1 min-w-0 overflow-hidden", n.class))), e;
   })();
 }
-function Y(r) {
-  const n = () => r.segments.map((t) => ({
-    id: t.path,
-    label: t.name
+function Y(n) {
+  const t = () => n.segments.map((r) => ({
+    id: r.path,
+    label: r.name
   }));
   return a(z, {
     get trigger() {
-      return (() => {
-        var t = j();
-        return b(() => x(t, C("text-xs px-1.5 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-all duration-100", "text-muted-foreground hover:text-foreground hover:bg-muted/50", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"))), t;
-      })();
+      return j();
     },
+    get triggerClass() {
+      return x("inline-flex items-center text-xs px-1.5 py-0.5 rounded flex-shrink-0", "transition-all duration-100", "text-muted-foreground hover:text-foreground hover:bg-muted/50");
+    },
+    triggerAriaLabel: "Show hidden path segments",
     get items() {
-      return n();
+      return t();
     },
-    onSelect: (t) => {
-      const c = r.segments.find((d) => d.path === t);
-      c && r.onSelect(c);
+    onSelect: (r) => {
+      const c = n.segments.find((h) => h.path === r);
+      c && n.onSelect(c);
     },
     align: "start"
   });
 }
-function Z(r) {
+function Z(n) {
   return (() => {
-    var n = q(), s = n.firstChild;
-    return n.$$click = () => r.onClick(), R(s, () => r.segment.name), b((t) => {
-      var c = r.isLast, d = C("text-xs px-1.5 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", r.isLast ? "font-medium text-foreground cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted/50");
-      return c !== t.e && (n.disabled = t.e = c), d !== t.t && x(n, t.t = d), t;
+    var t = q(), o = t.firstChild;
+    return t.$$click = () => n.onClick(), E(o, () => n.segment.name), D((r) => {
+      var c = n.isLast, h = x("text-xs px-1.5 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", n.isLast ? "font-medium text-foreground cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted/50");
+      return c !== r.e && (t.disabled = r.e = c), h !== r.t && L(t, r.t = h), r;
     }, {
       e: void 0,
       t: void 0
-    }), n;
+    }), t;
   })();
 }
 P(["click"]);

package/dist/components/layout/ActivityBar.d.ts

@@ -25,6 +25,7 @@ export interface ActivityBarProps {
     }) => void;
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
+    ariaLabel?: string;
     class?: string;
 }
 /**

package/dist/components/layout/ActivityBar.js

@@ -1,104 +1,110 @@
-import { insert as a, createComponent as l, effect as f, className as b, template as s, Dynamic as A, memo as k, setAttribute as y, delegateEvents as w } from "solid-js/web";
-import { createMemo as v, For as x, Show as g } from "solid-js";
-import { cn as m } from "../../utils/cn.js";
-import { deferNonBlocking as I } from "../../utils/defer.js";
-import { Tooltip as $ } from "../ui/Tooltip.js";
+import { insert as c, createComponent as a, effect as f, className as g, setAttribute as m, template as s, Dynamic as k, memo as w, delegateEvents as I } from "solid-js/web";
+import { createMemo as b, For as C, Show as h } from "solid-js";
+import { cn as y } from "../../utils/cn.js";
+import { deferNonBlocking as $ } from "../../utils/defer.js";
+import { Tooltip as B } from "../ui/Tooltip.js";
 import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
-var B = /* @__PURE__ */ s('<div class="flex flex-col">'), p = /* @__PURE__ */ s('<div data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), S = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), j = /* @__PURE__ */ s("<span>"), N = /* @__PURE__ */ s("<button type=button>");
-function V(e) {
-  const o = v(() => e.activeId), r = v(() => e.collapsed ?? !1), t = v(() => e.onActiveChange), c = v(() => e.onCollapsedChange), u = (i) => {
+var S = /* @__PURE__ */ s('<div class="flex flex-col">'), j = /* @__PURE__ */ s('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), N = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), q = /* @__PURE__ */ s("<span>"), D = /* @__PURE__ */ s("<button type=button>");
+function z(e) {
+  const o = b(() => e.activeId), n = b(() => e.collapsed ?? !1), t = b(() => e.onActiveChange), d = b(() => e.onCollapsedChange), v = (i) => {
     if (i.onClick) {
-      I(() => i.onClick());
+      $(() => i.onClick());
       return;
     }
-    const n = _({
+    const l = _({
       clickedId: i.id,
       activeId: o(),
-      collapsed: r(),
+      collapsed: n(),
       behavior: i.collapseBehavior
     });
-    n.nextActiveId !== o() && (typeof n.openSidebar == "boolean" ? t()(n.nextActiveId, {
-      openSidebar: n.openSidebar
-    }) : t()(n.nextActiveId)), typeof n.nextCollapsed == "boolean" && c()?.(n.nextCollapsed);
+    l.nextActiveId !== o() && (typeof l.openSidebar == "boolean" ? t()(l.nextActiveId, {
+      openSidebar: l.openSidebar
+    }) : t()(l.nextActiveId)), typeof l.nextCollapsed == "boolean" && d()?.(l.nextCollapsed);
   };
   return (() => {
-    var i = p(), n = i.firstChild;
-    return a(n, l(x, {
+    var i = j(), l = i.firstChild;
+    return c(l, a(C, {
       get each() {
         return e.items;
       },
-      children: (d) => l(C, {
-        item: d,
+      children: (r) => a(A, {
+        item: r,
         get isActive() {
-          return o() === d.id;
+          return o() === r.id;
         },
-        onClick: () => u(d)
+        onClick: () => v(r)
       })
-    })), a(i, l(g, {
+    })), c(i, a(h, {
       get when() {
         return e.bottomItems?.length;
       },
       get children() {
-        var d = B();
-        return a(d, l(x, {
+        var r = S();
+        return c(r, a(C, {
           get each() {
             return e.bottomItems;
           },
-          children: (h) => l(C, {
-            item: h,
+          children: (u) => a(A, {
+            item: u,
             isActive: !1,
-            onClick: () => u(h)
+            onClick: () => v(u)
           })
-        })), d;
+        })), r;
       }
-    }), null), f(() => b(i, m("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), i;
+    }), null), f((r) => {
+      var u = y("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class), x = e.ariaLabel;
+      return u !== r.e && g(i, r.e = u), x !== r.t && m(i, "aria-label", r.t = x), r;
+    }, {
+      e: void 0,
+      t: void 0
+    }), i;
   })();
 }
-function C(e) {
+function A(e) {
   const o = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
-  return l($, {
+  return a(B, {
     get content() {
       return e.item.label;
     },
     placement: "right",
     delay: 0,
     get children() {
-      var r = N();
-      return r.$$click = () => e.onClick(), a(r, l(g, {
+      var n = D();
+      return n.$$click = () => e.onClick(), c(n, a(h, {
         get when() {
           return e.isActive;
         },
         get children() {
-          return S();
+          return N();
         }
-      }), null), a(r, l(A, {
+      }), null), c(n, a(k, {
         get component() {
           return e.item.icon;
         },
         class: "w-5 h-5"
-      }), null), a(r, l(g, {
+      }), null), c(n, a(h, {
         get when() {
           return o();
         },
         get children() {
-          var t = j();
-          return a(t, (() => {
-            var c = k(() => typeof o() == "number" && o() > 99);
-            return () => c() ? "99+" : o();
-          })()), f(() => b(t, m("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
+          var t = q();
+          return c(t, (() => {
+            var d = w(() => typeof o() == "number" && o() > 99);
+            return () => d() ? "99+" : o();
+          })()), f(() => g(t, y("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
         }
       }), null), f((t) => {
-        var c = m("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-[color,background-color] duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), u = e.item.label, i = e.isActive;
-        return c !== t.e && b(r, t.e = c), u !== t.t && y(r, "aria-label", t.t = u), i !== t.a && y(r, "aria-pressed", t.a = i), t;
+        var d = y("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-[color,background-color] duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), v = e.item.label, i = e.isActive;
+        return d !== t.e && g(n, t.e = d), v !== t.t && m(n, "aria-label", t.t = v), i !== t.a && m(n, "aria-pressed", t.a = i), t;
       }, {
         e: void 0,
         t: void 0,
         a: void 0
-      }), r;
+      }), n;
     }
   });
 }
-w(["click"]);
+I(["click"]);
 export {
-  V as ActivityBar
+  z as ActivityBar
 };

package/dist/components/layout/MobileTabBar.d.ts

@@ -13,6 +13,7 @@ export interface MobileTabBarProps {
     items: MobileTabBarItem[];
     activeId: string;
     onSelect: (id: string) => void;
+    ariaLabel?: string;
     class?: string;
 }
 /**

package/dist/components/layout/MobileTabBar.js

@@ -1,115 +1,159 @@
-import { insert as a, createComponent as c, effect as k, className as v, template as f, Dynamic as _, memo as I, setAttribute as w, use as L, delegateEvents as F } from "solid-js/web";
-import { createSignal as C, onMount as W, onCleanup as M, Show as x, For as R } from "solid-js";
-import { cn as b } from "../../utils/cn.js";
-import { deferNonBlocking as j } from "../../utils/defer.js";
-var q = /* @__PURE__ */ f('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), z = /* @__PURE__ */ f('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ f('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"style=-webkit-overflow-scrolling:touch>'), E = /* @__PURE__ */ f("<span>"), N = /* @__PURE__ */ f('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), T = /* @__PURE__ */ f("<button type=button role=tab><div></div><span>");
-function K(e) {
-  let n;
-  const [i, s] = C(!1), [g, t] = C(!1);
-  let r = null;
-  const d = () => {
-    n && (s(n.scrollLeft > 0), t(n.scrollLeft < n.scrollWidth - n.clientWidth - 1));
-  }, h = () => {
-    if (r === null) {
+import { insert as c, createComponent as d, effect as S, className as v, setAttribute as C, template as b, Dynamic as W, memo as M, use as R, delegateEvents as z } from "solid-js/web";
+import { createSignal as I, onMount as D, onCleanup as E, Show as A, For as j } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
+import { deferNonBlocking as L } from "../../utils/defer.js";
+var q = /* @__PURE__ */ b('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ b('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), K = /* @__PURE__ */ b('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"role=tablist aria-orientation=horizontal style=-webkit-overflow-scrolling:touch>'), N = /* @__PURE__ */ b("<span>"), T = /* @__PURE__ */ b('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), H = /* @__PURE__ */ b("<button type=button role=tab><div></div><span>");
+function P(e) {
+  let i;
+  const [o, u] = I(!1), [h, t] = I(!1);
+  let n = null;
+  const s = () => {
+    i && (u(i.scrollLeft > 0), t(i.scrollLeft < i.scrollWidth - i.clientWidth - 1));
+  }, x = () => {
+    if (n === null) {
       if (typeof requestAnimationFrame > "u") {
-        d();
+        s();
         return;
       }
-      r = requestAnimationFrame(() => {
-        r = null, d();
+      n = requestAnimationFrame(() => {
+        n = null, s();
       });
     }
+  }, k = () => e.items, w = (l) => {
+    const r = k()[l];
+    if (r) {
+      if (r.onClick) {
+        L(() => r.onClick());
+        return;
+      }
+      e.onSelect(r.id);
+    }
   };
-  return W(() => {
-    d();
-    const o = e.items.findIndex((l) => l.id === e.activeId);
-    if (o > 0 && n) {
-      const l = n.scrollWidth / e.items.length;
-      n.scrollLeft = Math.max(0, l * o - n.clientWidth / 2 + l / 2);
+  return D(() => {
+    s();
+    const l = e.items.findIndex((r) => r.id === e.activeId);
+    if (l > 0 && i) {
+      const r = i.scrollWidth / e.items.length;
+      i.scrollLeft = Math.max(0, r * l - i.clientWidth / 2 + r / 2);
     }
-  }), M(() => {
-    r !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(r), r = null);
+  }), E(() => {
+    n !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(n), n = null);
   }), (() => {
-    var o = B(), l = o.firstChild, u = l.firstChild;
-    a(l, c(x, {
+    var l = K(), r = l.firstChild, m = r.firstChild;
+    c(r, d(A, {
       get when() {
-        return i();
+        return o();
       },
       get children() {
         return q();
       }
-    }), u), a(l, c(x, {
+    }), m), c(r, d(A, {
       get when() {
-        return g();
+        return h();
       },
       get children() {
-        return z();
+        return B();
       }
-    }), u), u.addEventListener("scroll", h);
-    var y = n;
-    return typeof y == "function" ? L(y, u) : n = u, a(u, c(R, {
+    }), m), m.addEventListener("scroll", x);
+    var $ = i;
+    return typeof $ == "function" ? R($, m) : i = m, c(m, d(j, {
       get each() {
         return e.items;
       },
-      children: (m) => c(D, {
-        item: m,
+      children: (a, y) => d(U, {
+        item: a,
         get isActive() {
-          return e.activeId === m.id;
+          return e.activeId === a.id;
+        },
+        get index() {
+          return y();
+        },
+        get itemCount() {
+          return e.items.length;
         },
         onClick: () => {
           "vibrate" in navigator && navigator.vibrate(10);
-          const $ = m.onClick, A = e.onSelect, S = m.id;
-          m.onClick ? j(() => $()) : A(S);
-        }
+          const f = a.onClick, _ = e.onSelect, F = a.id;
+          a.onClick ? L(() => f()) : _(F);
+        },
+        onKeyboardSelect: (f) => w(f)
       })
-    })), k(() => v(o, b(
-      // Same safe-area rule as TopBar: keep the visual bar height stable, and
-      // add safe-area padding on an outer wrapper (avoid squeezing content).
-      "relative shrink-0 bg-background border-t border-border safe-bottom safe-left safe-right",
-      e.class
-    ))), o;
+    })), S((a) => {
+      var y = g(
+        // Same safe-area rule as TopBar: keep the visual bar height stable, and
+        // add safe-area padding on an outer wrapper (avoid squeezing content).
+        "relative shrink-0 bg-background border-t border-border safe-bottom safe-left safe-right",
+        e.class
+      ), f = e.ariaLabel;
+      return y !== a.e && v(l, a.e = y), f !== a.t && C(l, "aria-label", a.t = f), a;
+    }, {
+      e: void 0,
+      t: void 0
+    }), l;
   })();
 }
-function D(e) {
-  const n = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
+function U(e) {
+  const i = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var i = T(), s = i.firstChild, g = s.nextSibling;
-    return i.$$click = () => e.onClick(), a(s, c(_, {
+    var o = H(), u = o.firstChild, h = u.nextSibling;
+    return o.$$keydown = (t) => {
+      let n = null;
+      switch (t.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          n = (e.index + 1) % e.itemCount;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          n = (e.index - 1 + e.itemCount) % e.itemCount;
+          break;
+        case "Home":
+          n = 0;
+          break;
+        case "End":
+          n = e.itemCount - 1;
+          break;
+        default:
+          return;
+      }
+      t.preventDefault(), e.onKeyboardSelect(n);
+    }, o.$$click = () => e.onClick(), c(u, d(W, {
       get component() {
         return e.item.icon;
       },
       class: "w-6 h-6"
-    }), null), a(s, c(x, {
+    }), null), c(u, d(A, {
       get when() {
-        return n();
+        return i();
       },
       get children() {
-        var t = E();
-        return a(t, (() => {
-          var r = I(() => typeof n() == "number" && n() > 99);
-          return () => r() ? "99+" : n();
-        })()), k(() => v(t, b("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
+        var t = N();
+        return c(t, (() => {
+          var n = M(() => typeof i() == "number" && i() > 99);
+          return () => n() ? "99+" : i();
+        })()), S(() => v(t, g("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
       }
-    }), null), a(g, () => e.item.label), a(i, c(x, {
+    }), null), c(h, () => e.item.label), c(o, d(A, {
       get when() {
         return e.isActive;
       },
       get children() {
-        return N();
+        return T();
       }
-    }), null), k((t) => {
-      var r = b("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), d = e.item.label, h = e.isActive, o = b("relative transition-transform duration-150", e.isActive && "scale-110"), l = b("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return r !== t.e && v(i, t.e = r), d !== t.t && w(i, "aria-label", t.t = d), h !== t.a && w(i, "aria-selected", t.a = h), o !== t.o && v(s, t.o = o), l !== t.i && v(g, t.i = l), t;
+    }), null), S((t) => {
+      var n = g("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), s = e.item.label, x = e.isActive, k = e.isActive ? 0 : -1, w = g("relative transition-transform duration-150", e.isActive && "scale-110"), l = g("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return n !== t.e && v(o, t.e = n), s !== t.t && C(o, "aria-label", t.t = s), x !== t.a && C(o, "aria-selected", t.a = x), k !== t.o && C(o, "tabindex", t.o = k), w !== t.i && v(u, t.i = w), l !== t.n && v(h, t.n = l), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0
-    }), i;
+      i: void 0,
+      n: void 0
+    }), o;
   })();
 }
-F(["click"]);
+z(["click", "keydown"]);
 export {
-  K as MobileTabBar
+  P as MobileTabBar
 };