@floegence/floe-webapp-core 0.35.21 → 0.35.23

package/dist/components/layout/Shell.js

@@ -1,163 +1,163 @@
-import { createComponent as o, Dynamic as k, insert as m, memo as p, effect as T, className as h, setStyleProperty as J, template as I, use as U, delegateEvents as X } from "solid-js/web";
-import { createSignal as R, createEffect as B, createMemo as g, For as N, Show as f } from "solid-js";
-import { useLayout as Y } from "../../context/LayoutContext.js";
-import { useResolvedFloeConfig as Z } from "../../context/FloeConfigContext.js";
-import { useMediaQuery as ee } from "../../hooks/useMediaQuery.js";
-import { useOverlayMask as te } from "../../hooks/useOverlayMask.js";
+import { createComponent as o, Dynamic as p, insert as d, memo as A, effect as N, className as h, setAttribute as L, setStyleProperty as ie, template as T, use as ne, delegateEvents as oe } from "solid-js/web";
+import { createSignal as Q, createEffect as x, createMemo as w, For as W, Show as C } from "solid-js";
+import { useLayout as ae } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as le } from "../../context/FloeConfigContext.js";
+import { useMediaQuery as se } from "../../hooks/useMediaQuery.js";
+import { useOverlayMask as de } from "../../hooks/useOverlayMask.js";
 import { cn as S } from "../../utils/cn.js";
-import { deferNonBlocking as re } from "../../utils/defer.js";
-import { useComponentRegistry as ie } from "../../context/ComponentRegistry.js";
-import { Sidebar as ne } from "./Sidebar.js";
-import { TopBar as oe } from "./TopBar.js";
-import { TopBarIconButton as le } from "./TopBarIconButton.js";
-import { BottomBar as ae } from "./BottomBar.js";
-import { MobileTabBar as se } from "./MobileTabBar.js";
-import { ActivityBar as de } from "./ActivityBar.js";
-import { ResizeHandle as W } from "./ResizeHandle.js";
-import { resolveMobileTabActiveId as ce, resolveMobileTabSelect as ue } from "./mobileTabs.js";
-import { KeepAliveStack as me } from "./KeepAliveStack.js";
-var P = /* @__PURE__ */ I('<div class="flex items-center gap-2">'), be = /* @__PURE__ */ I("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), fe = /* @__PURE__ */ I('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1><div class="h-full overflow-auto overscroll-contain">'), ve = /* @__PURE__ */ I("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), he = /* @__PURE__ */ I('<div data-floe-shell><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main>');
-function Re(r) {
-  const i = Y(), F = Z(), d = ee(F.config.layout.mobileQuery), [y, v] = R(!1), [z, A] = R(null);
-  let M;
-  const c = () => r.sidebarMode === "hidden", s = (() => {
+import { deferNonBlocking as ce } from "../../utils/defer.js";
+import { useComponentRegistry as ue } from "../../context/ComponentRegistry.js";
+import { Sidebar as be } from "./Sidebar.js";
+import { TopBar as me } from "./TopBar.js";
+import { TopBarIconButton as fe } from "./TopBarIconButton.js";
+import { BottomBar as ve } from "./BottomBar.js";
+import { MobileTabBar as ge } from "./MobileTabBar.js";
+import { ActivityBar as he } from "./ActivityBar.js";
+import { ResizeHandle as K } from "./ResizeHandle.js";
+import { resolveMobileTabActiveId as Ce, resolveMobileTabSelect as Se } from "./mobileTabs.js";
+import { KeepAliveStack as ye } from "./KeepAliveStack.js";
+var V = /* @__PURE__ */ T('<div class="flex items-center gap-2">'), we = /* @__PURE__ */ T("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), Ie = /* @__PURE__ */ T('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), Be = /* @__PURE__ */ T("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), ke = /* @__PURE__ */ T('<div data-floe-shell><a></a><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main tabindex=-1>');
+function Qe(r) {
+  const n = ae(), P = le(), c = se(P.config.layout.mobileQuery), [M, y] = Q(!1), [F, z] = Q(null);
+  let $;
+  const u = () => r.sidebarMode === "hidden", s = (() => {
     try {
-      return ie();
+      return ue();
     } catch {
       return null;
     }
-  })(), x = (e, a) => {
-    const l = s?.getComponent(e)?.sidebar?.fullScreen ?? !1, n = c() ? !1 : a?.openSidebar ?? !l;
-    i.setSidebarActiveTab(e, {
-      openSidebar: n
+  })(), O = (e, l) => {
+    const a = s?.getComponent(e)?.sidebar?.fullScreen ?? !1, i = u() ? !1 : l?.openSidebar ?? !a;
+    n.setSidebarActiveTab(e, {
+      openSidebar: i
     });
   };
-  B(() => {
-    c() && v(!1);
-  }), B(() => {
-    const e = d();
-    i.isMobile() !== e && i.setIsMobile(e);
-  }), B(() => {
-    d() || v(!1);
+  x(() => {
+    u() && y(!1);
+  }), x(() => {
+    const e = c();
+    n.isMobile() !== e && n.setIsMobile(e);
+  }), x(() => {
+    c() || y(!1);
   });
-  const C = g(() => r.activityItems ? r.activityItems : s ? s.sidebarItems().filter((e) => !!e.icon).filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const I = w(() => r.activityItems ? r.activityItems : s ? s.sidebarItems().filter((e) => !!e.icon).filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).map((e) => ({
     id: e.id,
     icon: e.icon,
     label: e.name,
     badge: e.sidebar?.badge,
     collapseBehavior: e.sidebar?.collapseBehavior ?? (e.sidebar?.fullScreen ? "preserve" : "toggle")
-  })) : []), H = g(() => c() ? [] : r.sidebarContent ? [] : s ? s.sidebarItems().filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
+  })) : []), j = w(() => u() ? [] : r.sidebarContent ? [] : s ? s.sidebarItems().filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
-    render: () => o(k, {
+    render: () => o(p, {
       get component() {
         return e.component;
       }
     })
-  })) : []), _ = (e) => {
-    if (!c()) {
+  })) : []), H = (e) => {
+    if (!u()) {
       if (r.sidebarContent) return r.sidebarContent(e);
       if (s)
-        return o(me, {
+        return o(ye, {
           get views() {
-            return H();
+            return j();
           },
           activeId: e
         });
     }
-  }, $ = g(() => c() ? !0 : s ? s.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), E = g(() => {
-    if (c()) return !0;
+  }, R = w(() => u() ? !0 : s ? s.getComponent(n.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), q = w(() => {
+    if (u()) return !0;
     if (!s) return !1;
-    const e = s.getComponent(i.sidebarActiveTab());
+    const e = s.getComponent(n.sidebarActiveTab());
     return e?.sidebar ? e.sidebar.fullScreen === !0 || e.sidebar.renderIn === "main" : !1;
   });
-  B(() => {
-    d() && $() && v(!1);
+  x(() => {
+    c() && R() && y(!1);
   });
-  const D = g(() => {
+  const G = w(() => {
     if (r.bottomBarItems) return r.bottomBarItems;
     if (!s) return;
-    const e = [...s.statusBarItems()].sort((n, t) => (n.order ?? 100) - (t.order ?? 100)), a = e.filter((n) => n.position === "left"), l = e.filter((n) => n.position === "right");
+    const e = [...s.statusBarItems()].sort((i, v) => (i.order ?? 100) - (v.order ?? 100)), l = e.filter((i) => i.position === "left"), a = e.filter((i) => i.position === "right");
     return [(() => {
-      var n = P();
-      return m(n, o(N, {
-        each: a,
-        children: (t) => o(k, {
+      var i = V();
+      return d(i, o(W, {
+        each: l,
+        children: (v) => o(p, {
           get component() {
-            return t.component;
+            return v.component;
           }
         })
-      })), n;
+      })), i;
     })(), (() => {
-      var n = P();
-      return m(n, o(N, {
-        each: l,
-        children: (t) => o(k, {
+      var i = V();
+      return d(i, o(W, {
+        each: a,
+        children: (v) => o(p, {
           get component() {
-            return t.component;
+            return v.component;
           }
         })
-      })), n;
+      })), i;
     })()];
   });
-  B(() => {
-    const e = C();
+  x(() => {
+    const e = I();
     if (!e.length) return;
-    if (!i.sidebarActiveTab()) {
-      const l = e.find((n) => !n.onClick);
-      if (!l) return;
-      x(l.id);
+    if (!n.sidebarActiveTab()) {
+      const a = e.find((i) => !i.onClick);
+      if (!a) return;
+      O(a.id);
     }
   });
-  const O = (e) => {
-    const a = c() ? !0 : s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
-      nextActiveId: l,
-      nextMobileSidebarOpen: n
-    } = ue({
+  const E = (e) => {
+    const l = u() ? !0 : s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+      nextActiveId: a,
+      nextMobileSidebarOpen: i
+    } = Se({
       clickedId: e,
-      activeId: i.sidebarActiveTab(),
-      mobileSidebarOpen: y(),
-      clickedIsFullScreen: a
+      activeId: n.sidebarActiveTab(),
+      mobileSidebarOpen: M(),
+      clickedIsFullScreen: l
     });
-    i.sidebarActiveTab() !== l && x(l), v(n);
-  }, Q = (e) => {
+    n.sidebarActiveTab() !== a && O(a), y(i);
+  }, J = (e) => {
     if (e.onClick) {
-      re(() => e.onClick());
+      ce(() => e.onClick());
       return;
     }
-    O(e.id);
-  }, K = g(() => {
+    E(e.id);
+  }, U = w(() => {
     const e = r.topBarActions;
-    if (!d() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
-    const l = r.activityBottomItems ?? [];
-    return l.length ? [o(N, {
-      each: l,
-      children: (n) => o(le, {
+    if (!c() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
+    const a = r.activityBottomItems ?? [];
+    return a.length ? [o(W, {
+      each: a,
+      children: (i) => o(fe, {
         get label() {
-          return n.label;
+          return i.label;
         },
-        onClick: () => Q(n),
+        onClick: () => J(i),
         get children() {
-          return o(k, {
+          return o(p, {
             get component() {
-              return n.icon;
+              return i.icon;
             },
             class: "w-4 h-4"
           });
         }
       })
     }), e] : e;
-  }), L = () => c() ? !0 : i.sidebarCollapsed(), V = () => z() ?? i.sidebarWidth(), j = () => {
-    A(i.sidebarWidth());
-  }, q = (e) => {
-    A((a) => i.clampSidebarWidth((a ?? i.sidebarWidth()) + e));
-  }, G = () => {
-    const e = z();
-    e !== null && (i.setSidebarWidth(e), A(null));
+  }), X = () => u() ? !0 : n.sidebarCollapsed(), Y = () => F() ?? n.sidebarWidth(), f = () => P.config.accessibility, Z = () => {
+    z(n.sidebarWidth());
+  }, ee = (e) => {
+    z((l) => n.clampSidebarWidth((l ?? n.sidebarWidth()) + e));
+  }, te = () => {
+    const e = F();
+    e !== null && (n.setSidebarWidth(e), z(null));
   };
-  return te({
-    open: () => d() && y() && !c(),
-    root: () => M,
-    onClose: () => v(!1),
+  de({
+    open: () => c() && M() && !u(),
+    root: () => $,
+    onClose: () => y(!1),
     lockBodyScroll: !0,
     trapFocus: !0,
     closeOnEscape: !0,
@@ -166,149 +166,177 @@ function Re(r) {
     blockTouchMove: "outside",
     autoFocus: !1,
     restoreFocus: !0
-  }), (() => {
-    var e = he(), a = e.firstChild, l = a.firstChild, n = l.firstChild;
-    return m(e, o(oe, {
+  });
+  const re = () => {
+    if (typeof document > "u") return;
+    const e = document.getElementById(f().mainContentId);
+    if (!(!e || !(e instanceof HTMLElement)))
+      try {
+        e.focus();
+      } catch {
+      }
+  };
+  return (() => {
+    var e = ke(), l = e.firstChild, a = l.nextSibling, i = a.firstChild, v = i.firstChild;
+    return l.$$click = () => re(), d(l, () => f().skipLinkLabel), d(e, o(me, {
       get logo() {
         return r.logo;
       },
       get actions() {
-        return K();
+        return U();
+      },
+      get ariaLabel() {
+        return f().topBarLabel;
       },
       get class() {
         return r.slotClassNames?.topBar;
       }
-    }), a), m(a, o(f, {
+    }), a), d(a, o(C, {
       get when() {
-        return !d();
+        return !c();
       },
       get children() {
-        return [o(f, {
+        return [o(C, {
           get when() {
-            return C().length > 0;
+            return I().length > 0;
           },
           get children() {
-            return o(de, {
+            return o(he, {
               get items() {
-                return C();
+                return I();
               },
               get bottomItems() {
                 return r.activityBottomItems;
               },
               get activeId() {
-                return i.sidebarActiveTab();
+                return n.sidebarActiveTab();
               },
-              onActiveChange: x,
+              onActiveChange: O,
               get collapsed() {
-                return L();
+                return X();
               },
               get onCollapsedChange() {
-                return p(() => !!c())() ? void 0 : i.setSidebarCollapsed;
+                return A(() => !!u())() ? void 0 : n.setSidebarCollapsed;
+              },
+              get ariaLabel() {
+                return f().primaryNavigationLabel;
               },
               get class() {
                 return r.slotClassNames?.activityBar;
               }
             });
           }
-        }), o(f, {
+        }), o(C, {
           get when() {
-            return !c();
+            return !u();
           },
           get children() {
-            return o(ne, {
+            return o(be, {
               get width() {
-                return V();
+                return Y();
               },
               get collapsed() {
-                return i.sidebarCollapsed() || $();
+                return n.sidebarCollapsed() || R();
+              },
+              get ariaLabel() {
+                return f().sidebarLabel;
               },
               get resizer() {
-                return o(W, {
+                return o(K, {
                   direction: "horizontal",
-                  onResize: q,
-                  onResizeStart: j,
-                  onResizeEnd: G
+                  onResize: ee,
+                  onResizeStart: Z,
+                  onResizeEnd: te
                 });
               },
               get class() {
                 return r.slotClassNames?.sidebar;
               },
               get children() {
-                return _(i.sidebarActiveTab());
+                return H(n.sidebarActiveTab());
               }
             });
           }
         })];
       }
-    }), l), m(a, o(f, {
+    }), i), d(a, o(C, {
       get when() {
-        return p(() => !!(d() && y()))() && !c();
+        return A(() => !!(c() && M()))() && !u();
       },
       get children() {
         return [(() => {
-          var t = be();
-          return t.$$click = () => v(!1), T(() => h(t, S("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
+          var t = we();
+          return t.$$click = () => y(!1), N(() => h(t, S("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var t = fe(), u = t.firstChild, b = M;
-          return typeof b == "function" ? U(b, t) : M = t, m(u, () => _(i.sidebarActiveTab())), T(() => h(t, S("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200", r.slotClassNames?.mobileSidebarDrawer))), t;
+          var t = Ie(), b = t.firstChild, g = $;
+          return typeof g == "function" ? ne(g, t) : $ = t, d(b, () => H(n.sidebarActiveTab())), N((m) => {
+            var B = S("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200", r.slotClassNames?.mobileSidebarDrawer), k = f().sidebarLabel;
+            return B !== m.e && h(t, m.e = B), k !== m.t && L(t, "aria-label", m.t = k), m;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
         })()];
       }
-    }), l), m(n, () => r.children), m(l, o(f, {
+    }), i), d(v, () => r.children), d(i, o(C, {
       get when() {
-        return p(() => !!(!d() && i.terminalOpened()))() && r.terminalPanel;
+        return A(() => !!(!c() && n.terminalOpened()))() && r.terminalPanel;
       },
       get children() {
-        var t = ve();
-        return m(t, o(W, {
+        var t = Be();
+        return d(t, o(K, {
           direction: "vertical",
-          onResize: (u) => i.setTerminalHeight(i.terminalHeight() - u)
-        }), null), m(t, () => r.terminalPanel, null), T((u) => {
-          var b = S("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), w = `${i.terminalHeight()}px`;
-          return b !== u.e && h(t, u.e = b), w !== u.t && J(t, "height", u.t = w), u;
+          onResize: (b) => n.setTerminalHeight(n.terminalHeight() - b)
+        }), null), d(t, () => r.terminalPanel, null), N((b) => {
+          var g = S("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), m = `${n.terminalHeight()}px`;
+          return g !== b.e && h(t, b.e = g), m !== b.t && ie(t, "height", b.t = m), b;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), m(e, o(f, {
+    }), null), d(e, o(C, {
       get when() {
-        return !d();
+        return !c();
       },
       get children() {
-        return o(ae, {
+        return o(ve, {
           get class() {
             return r.slotClassNames?.bottomBar;
           },
           get children() {
-            return D();
+            return G();
           }
         });
       }
-    }), null), m(e, o(f, {
+    }), null), d(e, o(C, {
       get when() {
-        return p(() => !!d())() && C().length > 0;
+        return A(() => !!c())() && I().length > 0;
       },
       get children() {
-        return o(se, {
+        return o(ge, {
           get items() {
-            return C();
+            return I();
           },
           get activeId() {
-            return ce({
-              activeId: i.sidebarActiveTab(),
-              mobileSidebarOpen: y(),
-              activeIsFullScreen: $(),
-              activeIsPage: E()
+            return Ce({
+              activeId: n.sidebarActiveTab(),
+              mobileSidebarOpen: M(),
+              activeIsFullScreen: R(),
+              activeIsPage: q()
             });
           },
-          onSelect: O,
+          onSelect: E,
+          get ariaLabel() {
+            return f().mobileNavigationLabel;
+          },
           get class() {
             return r.slotClassNames?.mobileTabBar;
           }
         });
       }
-    }), null), T((t) => {
-      var u = S(
+    }), null), N((t) => {
+      var b = S(
         // Use dvh when supported to avoid mobile browser UI causing layout jumps.
         "h-screen h-[100dvh] w-full flex flex-col overflow-hidden",
         "bg-background text-foreground",
@@ -316,16 +344,20 @@ function Re(r) {
         "overscroll-none",
         r.slotClassNames?.root,
         r.class
-      ), b = S("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), w = S("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main);
-      return u !== t.e && h(e, t.e = u), b !== t.t && h(l, t.t = b), w !== t.a && h(n, t.a = w), t;
+      ), g = `#${f().mainContentId}`, m = S("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), B = S("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), k = S("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main), _ = f().mainContentId, D = f().mainLabel;
+      return b !== t.e && h(e, t.e = b), g !== t.t && L(l, "href", t.t = g), m !== t.a && h(l, t.a = m), B !== t.o && h(i, t.o = B), k !== t.i && h(v, t.i = k), _ !== t.n && L(v, "id", t.n = _), D !== t.s && L(v, "aria-label", t.s = D), t;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
     }), e;
   })();
 }
-X(["click"]);
+oe(["click"]);
 export {
-  Re as Shell
+  Qe as Shell
 };

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

@@ -4,6 +4,7 @@ export interface SidebarProps {
     resizer?: JSX.Element;
     width?: number;
     collapsed?: boolean;
+    ariaLabel?: string;
     class?: string;
 }
 /**

package/dist/components/layout/Sidebar.js

@@ -1,69 +1,71 @@
-import { insert as l, effect as c, className as o, setStyleProperty as u, memo as x, template as d, delegateEvents as g } from "solid-js/web";
+import { insert as l, effect as o, className as c, setStyleProperty as u, setAttribute as g, memo as $, template as d, delegateEvents as y } from "solid-js/web";
 import "solid-js";
 import { cn as s } from "../../utils/cn.js";
-var $ = /* @__PURE__ */ d('<aside data-floe-shell-slot=sidebar data-floe-geometry-surface=shell-sidebar><div class="flex-1 overflow-auto overscroll-contain">'), m = /* @__PURE__ */ d("<div>"), _ = /* @__PURE__ */ d("<section><div class=flex-1>"), w = /* @__PURE__ */ d('<div class="flex items-center justify-between px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"><span>'), y = /* @__PURE__ */ d('<button type=button><span class="flex-1 truncate text-left">'), S = /* @__PURE__ */ d('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
-function j(e) {
+var _ = /* @__PURE__ */ d('<aside data-floe-shell-slot=sidebar data-floe-geometry-surface=shell-sidebar><div class="flex-1 overflow-auto overscroll-contain">'), w = /* @__PURE__ */ d("<div>"), S = /* @__PURE__ */ d("<section><div class=flex-1>"), k = /* @__PURE__ */ d('<div class="flex items-center justify-between px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"><span>'), C = /* @__PURE__ */ d('<button type=button><span class="flex-1 truncate text-left">'), I = /* @__PURE__ */ d('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
+function A(e) {
   const t = () => e.collapsed ?? !1, a = () => e.width ?? 350;
   return (() => {
-    var i = $(), n = i.firstChild;
-    return l(n, () => e.children), l(i, () => e.resizer, null), c((r) => {
-      var f = s("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", "transition-[width] duration-150 ease-out", e.class), v = t() ? "0px" : `${a()}px`, b = t() ? "hidden" : "visible", h = t() ? "0px" : void 0;
-      return f !== r.e && o(i, r.e = f), v !== r.t && u(i, "width", r.t = v), b !== r.a && u(i, "visibility", r.a = b), h !== r.o && u(i, "border-right-width", r.o = h), r;
+    var i = _(), n = i.firstChild;
+    return l(n, () => e.children), l(i, () => e.resizer, null), o((r) => {
+      var v = s("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", "transition-[width] duration-150 ease-out", e.class), f = t() ? "0px" : `${a()}px`, b = t() ? "hidden" : "visible", h = t() ? "0px" : void 0, x = e.ariaLabel, m = t() ? "true" : void 0;
+      return v !== r.e && c(i, r.e = v), f !== r.t && u(i, "width", r.t = f), b !== r.a && u(i, "visibility", r.a = b), h !== r.o && u(i, "border-right-width", r.o = h), x !== r.i && g(i, "aria-label", r.i = x), m !== r.n && g(i, "aria-hidden", r.n = m), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0
+      o: void 0,
+      i: void 0,
+      n: void 0
     }), i;
   })();
 }
-function z(e) {
+function E(e) {
   return (() => {
-    var t = m();
-    return l(t, () => e.children), c(() => o(t, s("p-2.5 space-y-3", e.class))), t;
+    var t = w();
+    return l(t, () => e.children), o(() => c(t, s("p-2.5 space-y-3", e.class))), t;
   })();
 }
-function E(e) {
+function N(e) {
   return (() => {
-    var t = m();
-    return l(t, () => e.children), c(() => o(t, s("space-y-0.5", e.class))), t;
+    var t = w();
+    return l(t, () => e.children), o(() => c(t, s("space-y-0.5", e.class))), t;
   })();
 }
-function L(e) {
+function P(e) {
   return (() => {
-    var t = _(), a = t.firstChild;
+    var t = S(), a = t.firstChild;
     return l(t, (() => {
-      var i = x(() => !!e.title);
+      var i = $(() => !!e.title);
       return () => i() && (() => {
-        var n = w(), r = n.firstChild;
+        var n = k(), r = n.firstChild;
         return l(r, () => e.title), l(n, () => e.actions, null), n;
       })();
-    })(), a), l(a, () => e.children), c(() => o(t, s("flex flex-col", e.class))), t;
+    })(), a), l(a, () => e.children), o(() => c(t, s("flex flex-col", e.class))), t;
   })();
 }
-function N(e) {
+function q(e) {
   return (() => {
-    var t = y(), a = t.firstChild;
+    var t = C(), a = t.firstChild;
     return t.$$click = () => e.onClick?.(), l(t, (() => {
-      var i = x(() => !!e.icon);
+      var i = $(() => !!e.icon);
       return () => i() && (() => {
-        var n = S();
+        var n = I();
         return l(n, () => e.icon), n;
       })();
-    })(), a), l(a, () => e.children), c((i) => {
+    })(), a), l(a, () => e.children), o((i) => {
       var n = s("w-full flex items-center gap-2 px-2.5 py-1.5 text-xs cursor-pointer", "transition-colors duration-75", "hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring", e.active && "bg-sidebar-accent text-sidebar-accent-foreground font-medium", e.class), r = e.indent ? `${10 + e.indent * 10}px` : void 0;
-      return n !== i.e && o(t, i.e = n), r !== i.t && u(t, "padding-left", i.t = r), i;
+      return n !== i.e && c(t, i.e = n), r !== i.t && u(t, "padding-left", i.t = r), i;
     }, {
       e: void 0,
       t: void 0
     }), t;
   })();
 }
-g(["click"]);
+y(["click"]);
 export {
-  j as Sidebar,
-  z as SidebarContent,
-  N as SidebarItem,
-  E as SidebarItemList,
-  L as SidebarSection
+  A as Sidebar,
+  E as SidebarContent,
+  q as SidebarItem,
+  N as SidebarItemList,
+  P as SidebarSection
 };

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

@@ -12,6 +12,7 @@ export interface SidebarPaneProps {
     onClose?: () => void;
     mobileOverlay?: boolean;
     mobileBackdrop?: boolean;
+    ariaLabel?: string;
     class?: string;
     innerClass?: string;
     bodyClass?: string;