@adea-ai/ui 0.87.0 → 0.88.0

package/README.md

@@ -87,6 +87,12 @@ updates, navigation, and other effects remain host callbacks.
 
 `SidebarNavTitle` accepts polymorphic `as` for a host's title heading.
 Use `SidebarNavSection.headingAs` (h1 through h6) for section headings.
+Sections may be uncontrolled with `defaultOpen` or controlled with `open` and
+`onOpenChange`. Put disclosure-button attributes and host-owned row interactions
+in `triggerProps`; its `onClick` and `onKeyDown` run before shared behavior, and
+`preventDefault()` cancels the corresponding toggle or Alt+Arrow reorder callback.
+`triggerProps.onReorder` receives `up` or `down`; the host remains responsible for
+updating its hierarchy and preserving stable row identity.
 Disclosure buttons stay inside their heading and trailing actions stay outside
 it, preserving hierarchy and independent keyboard actions.
 

package/dist/components/layout/sidebar-nav/index.d.ts

@@ -1,3 +1,3 @@
-export { SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, sidebarNavItemClass, sidebarNavItemStateClass, type SidebarNavItemProps, type SidebarNavProps, type SidebarNavTitleProps, } from './sidebar-nav';
+export { SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, sidebarNavItemClass, sidebarNavItemStateClass, type SidebarNavItemProps, type SidebarNavProps, type SidebarNavSectionProps, type SidebarNavSectionTriggerProps, type SidebarNavTitleProps, } from './sidebar-nav';
 export { SidebarNavResizeHandle, type SidebarNavResizeHandleProps, } from './sidebar-nav-resize-handle';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/sidebar-nav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sidebar-nav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,oBAAoB,GAC1B,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sidebar-nav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,6BAA6B,EAClC,KAAK,oBAAoB,GAC1B,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,6BAA6B,CAAA"}

package/dist/components/layout/sidebar-nav/sidebar-nav.d.ts

@@ -30,23 +30,39 @@ export declare function SidebarNavTitle<T extends ValidComponent = 'div'>(props:
 /** The scrolling middle of the sidebar. */
 export declare function SidebarNavContent(props: ComponentProps<'div'>): JSX.Element;
 export declare function SidebarNavFooter(props: ComponentProps<'div'>): JSX.Element;
+/** Props forwarded to a collapsible section's disclosure button. */
+export type SidebarNavSectionTriggerProps = Omit<ComponentProps<'button'>, 'type' | 'aria-expanded' | 'onClick' | 'onKeyDown' | 'children' | 'class' | 'style'> & {
+    /** Called for Alt+ArrowUp/Down; the host owns ordering and row identity. */
+    onReorder?: (direction: 'up' | 'down') => void;
+    /** Runs before the section toggle and may cancel it with `preventDefault()`. */
+    onClick?: ComponentProps<'button'>['onClick'];
+    /** Runs before shared Alt+Arrow handling and may cancel it with `preventDefault()`. */
+    onKeyDown?: ComponentProps<'button'>['onKeyDown'];
+};
 /**
  * A titled, collapsible group. Collapsible because a list of projects
  * inevitably outgrows the column, and the user needs to put the ones they are
  * not using away *without* them disappearing into a menu.
  */
-export declare function SidebarNavSection(props: ComponentProps<'div'> & {
+export type SidebarNavSectionProps = ComponentProps<'div'> & {
     label: string;
     /** Render a disclosure control instead of a plain heading. */
     collapsible?: boolean;
     defaultOpen?: boolean;
+    /** Controlled disclosure state. When supplied, the host owns changes. */
+    open?: boolean;
+    /** Called for user-initiated disclosure changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Native props and reorder callbacks for the disclosure control. */
+    triggerProps?: SidebarNavSectionTriggerProps;
     /** Count shown beside the label. */
     count?: number;
     /** A control at the trailing edge of the heading row. */
     action?: JSX.Element;
     /** Semantic heading element for a host's section hierarchy. */
     headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-}): JSX.Element;
+};
+export declare function SidebarNavSection(props: SidebarNavSectionProps): JSX.Element;
 export type SidebarNavItemProps<T extends ValidComponent = 'a'> = PolymorphicProps<T, {
     class?: string;
     active?: boolean;

package/dist/components/layout/sidebar-nav/sidebar-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sidebar-nav/sidebar-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAGjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAInE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC9E,CAAC,EACD;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAgBrF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS5D;AAED,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CACnF,CAAC,EACD;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CACnB,CAAA;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAU/F;AAED,2CAA2C;AAC3C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS7D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS5D;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACpD,eA6DF;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CAChF,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CACF,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,QAKrB,CAAA;AAEX,eAAO,MAAM,wBAAwB;;;CAGpC,CAAA;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA4B3F;AAED,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAiB/D"}
+{"version":3,"file":"sidebar-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sidebar-nav/sidebar-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAGjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAanE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC9E,CAAC,EACD;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAgBrF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS5D;AAED,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CACnF,CAAC,EACD;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CACnB,CAAA;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAU/F;AAED,2CAA2C;AAC3C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS7D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS5D;AAED,oEAAoE;AACpE,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC9C,cAAc,CAAC,QAAQ,CAAC,EACxB,MAAM,GAAG,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CACpF,GAAG;IACF,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;IAC9C,gFAAgF;IAChF,OAAO,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7C,uFAAuF;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAA;CAClD,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,qEAAqE;IACrE,YAAY,CAAC,EAAE,6BAA6B,CAAA;IAC5C,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACpD,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAuF9D;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CAChF,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CACF,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,QAKrB,CAAA;AAEX,eAAO,MAAM,wBAAwB;;;CAGpC,CAAA;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA4B3F;AAED,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAiB/D"}

package/dist/components/layout/sidebar-nav/sidebar-nav.js

@@ -1,5 +1,5 @@
 import { cn } from "../../../lib/utils.js";
-import { createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { ChevronRight } from "lucide-solid";
 import { Show, createSignal, splitProps } from "solid-js";
 import { Polymorphic } from "@kobalte/core/polymorphic";
@@ -9,12 +9,18 @@ var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-content>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-footer>`);
 var _tmpl$4 = /*#__PURE__*/ template(`<span class="min-w-0 flex-1 truncate">`);
 var _tmpl$5 = /*#__PURE__*/ template(`<span class="shrink-0 tabular-nums text-muted-foreground">`);
-var _tmpl$6 = /*#__PURE__*/ template(`<button type=button class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<button>`);
 var _tmpl$7 = /*#__PURE__*/ template(`<span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">`);
 var _tmpl$8 = /*#__PURE__*/ template(`<div class="flex flex-col gap-0.5">`);
 var _tmpl$9 = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-section><div class="group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60">`);
 var _tmpl$0 = /*#__PURE__*/ template(`<span class="ms-auto flex shrink-0 items-center gap-1">`);
 var _tmpl$1 = /*#__PURE__*/ template(`<button type=button>`);
+function invokeEventHandler(handler, event) {
+	if (Array.isArray(handler)) {
+		const [callback, data] = handler;
+		callback(data, event);
+	} else if (typeof handler === "function") handler(event);
+}
 function SidebarNav(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
@@ -74,23 +80,31 @@ function SidebarNavFooter(props) {
 		return _el$3;
 	})();
 }
-/**
-* A titled, collapsible group. Collapsible because a list of projects
-* inevitably outgrows the column, and the user needs to put the ones they are
-* not using away *without* them disappearing into a menu.
-*/
 function SidebarNavSection(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
 		"label",
 		"collapsible",
 		"defaultOpen",
+		"open",
+		"onOpenChange",
+		"triggerProps",
 		"count",
 		"action",
 		"headingAs",
 		"children"
 	]);
-	const [open, setOpen] = createSignal(local.defaultOpen ?? true);
+	const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? true);
+	const open = () => local.open ?? uncontrolledOpen();
+	const setOpen = (next) => {
+		if (local.open === void 0) setUncontrolledOpen(next);
+		local.onOpenChange?.(next);
+	};
+	const [trigger, triggerRest] = splitProps(local.triggerProps ?? {}, [
+		"onClick",
+		"onKeyDown",
+		"onReorder"
+	]);
 	const heading = [
 		createComponent(Show, {
 			get when() {
@@ -142,9 +156,27 @@ function SidebarNavSection(props) {
 					fallback: heading,
 					get children() {
 						var _el$8 = _tmpl$6();
-						_el$8.$$click = () => setOpen((value) => !value);
+						spread(_el$8, mergeProps(triggerRest, {
+							"type": "button",
+							get ["aria-expanded"]() {
+								return open();
+							},
+							"onClick": (event) => {
+								invokeEventHandler(trigger.onClick, event);
+								if (event.defaultPrevented) return;
+								setOpen(!open());
+							},
+							"onKeyDown": (event) => {
+								invokeEventHandler(trigger.onKeyDown, event);
+								if (event.defaultPrevented || !event.altKey) return;
+								if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+								event.preventDefault();
+								event.stopPropagation();
+								trigger.onReorder?.(event.key === "ArrowUp" ? "up" : "down");
+							},
+							"class": "flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
+						}), false, true);
 						insert(_el$8, heading);
-						effect(() => setAttribute(_el$8, "aria-expanded", open()));
 						return _el$8;
 					}
 				});
@@ -228,7 +260,6 @@ function SidebarNavButton(props) {
 		return _el$10;
 	})();
 }
-delegateEvents(["click"]);
 //#endregion
 export { SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, sidebarNavItemClass, sidebarNavItemStateClass };
 

package/dist/components/layout/sidebar-nav/sidebar-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-nav.js","names":["PolymorphicProps","Polymorphic","ChevronRight","ComponentProps","JSX","ValidComponent","Show","createSignal","splitProps","cn","SidebarNavProps","T","class","SidebarNav","props","local","rest","_$createComponent","_$mergeProps","as","aria-label","children","SidebarNavHeader","_el$","_tmpl$","_$spread","SidebarNavTitleProps","SidebarNavTitle","SidebarNavContent","_el$2","_tmpl$2","SidebarNavFooter","_el$3","_tmpl$3","SidebarNavSection","label","collapsible","defaultOpen","count","action","Element","headingAs","open","setOpen","heading","when","_el$4","_tmpl$4","_$insert","undefined","_el$5","_tmpl$5","_el$6","_tmpl$9","_el$7","firstChild","_$memo","fallback","_el$8","_tmpl$6","$$click","value","_$effect","_$setAttribute","_el$9","_tmpl$7","_el$0","_tmpl$8","SidebarNavItemProps","active","nested","trailing","sidebarNavItemClass","join","sidebarNavItemStateClass","idle","SidebarNavItem","aria-current","data-active","_el$1","_tmpl$0","SidebarNavButton","_el$10","_tmpl$1","_$delegateEvents","_$createComponent","_$mergeProps","_$memo","_$setAttribute","_$delegateEvents"],"sources":["../../../../src/components/layout/sidebar-nav/sidebar-nav.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport { ChevronRight } from 'lucide-solid'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, createSignal, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * SidebarNav.\n *\n * The secondary navigation column: the list of things inside the destination\n * the rail selected — projects, sessions, files, threads. It is a different\n * object from the rail, not a wider version of it, which is why it is a separate\n * component rather than the rail with labels on.\n *\n * Rows share one recipe with the rail's, so a row in a sidebar and a row in a\n * rail read as the same kind of thing at the same density. That recipe is\n * exactly KiroCrew's nav row: `text-sm font-medium`, `gap-2.5`, `px-3 py-2`,\n * `rounded-md`, `transition-colors`.\n *\n * The width comes from `--sidebar-width`. Sections collapse by default only when\n * the caller says so, because a section that starts collapsed and holds the\n * user's own work is a hidden default.\n */\nexport type SidebarNavProps<T extends ValidComponent = 'nav'> = PolymorphicProps<\n  T,\n  { class?: string; 'aria-label'?: string }\n>\n\nexport function SidebarNav<T extends ValidComponent = 'nav'>(props: SidebarNavProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavProps, ['class', 'aria-label', 'children'])\n\n  return (\n    <Polymorphic\n      as=\"nav\"\n      aria-label={local['aria-label'] ?? 'Section'}\n      class={cn(\n        'bg-sidebar text-sidebar-foreground flex h-full w-sidebar shrink-0 flex-col border-e border-sidebar-border',\n        local.class\n      )}\n      {...(rest as ComponentProps<'nav'>)}\n    >\n      {local.children}\n    </Polymorphic>\n  )\n}\n\nexport function SidebarNavHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-header\"\n      class={cn('flex h-topbar shrink-0 items-center justify-between gap-2 px-3', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type SidebarNavTitleProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  { class?: string }\n>\n\nexport function SidebarNavTitle<T extends ValidComponent = 'div'>(props: SidebarNavTitleProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavTitleProps, ['class'])\n  return (\n    <Polymorphic\n      as=\"div\"\n      data-slot=\"sidebar-nav-title\"\n      class={cn('truncate text-sm font-semibold tracking-tight', local.class)}\n      {...(rest as ComponentProps<'div'>)}\n    />\n  )\n}\n\n/** The scrolling middle of the sidebar. */\nexport function SidebarNavContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-content\"\n      class={cn('flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SidebarNavFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-footer\"\n      class={cn('flex shrink-0 items-center gap-1 border-t border-sidebar-border p-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A titled, collapsible group. Collapsible because a list of projects\n * inevitably outgrows the column, and the user needs to put the ones they are\n * not using away *without* them disappearing into a menu.\n */\nexport function SidebarNavSection(\n  props: ComponentProps<'div'> & {\n    label: string\n    /** Render a disclosure control instead of a plain heading. */\n    collapsible?: boolean\n    defaultOpen?: boolean\n    /** Count shown beside the label. */\n    count?: number\n    /** A control at the trailing edge of the heading row. */\n    action?: JSX.Element\n    /** Semantic heading element for a host's section hierarchy. */\n    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'collapsible',\n    'defaultOpen',\n    'count',\n    'action',\n    'headingAs',\n    'children',\n  ])\n  const [open, setOpen] = createSignal(local.defaultOpen ?? true)\n\n  const heading = (\n    <>\n      <Show when={local.collapsible}>\n        <ChevronRight\n          aria-hidden=\"true\"\n          class={cn('size-3.5 shrink-0 text-muted-foreground transition-transform ease-out', {\n            'rotate-90': open(),\n          })}\n        />\n      </Show>\n      <span class=\"min-w-0 flex-1 truncate\">{local.label}</span>\n      <Show when={local.count !== undefined}>\n        <span class=\"shrink-0 tabular-nums text-muted-foreground\">{local.count}</span>\n      </Show>\n    </>\n  )\n\n  return (\n    <div data-slot=\"sidebar-nav-section\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <div class=\"group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60\">\n        <Polymorphic\n          as={local.headingAs ?? 'div'}\n          aria-label={local.headingAs ? local.label : undefined}\n          class=\"flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase\"\n        >\n          <Show when={local.collapsible} fallback={heading}>\n            <button\n              type=\"button\"\n              aria-expanded={open()}\n              onClick={() => setOpen((value) => !value)}\n              class=\"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n            >\n              {heading}\n            </button>\n          </Show>\n        </Polymorphic>\n        <Show when={local.action}>\n          <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100\">\n            {local.action}\n          </span>\n        </Show>\n      </div>\n      <Show when={!local.collapsible || open()}>\n        <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n      </Show>\n    </div>\n  )\n}\n\nexport type SidebarNavItemProps<T extends ValidComponent = 'a'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    active?: boolean\n    /** Indent one level, for a child row such as a branch under a project. */\n    nested?: boolean\n    /** Trailing slot: a count, a status dot, a hover action. */\n    trailing?: JSX.Element\n  }\n>\n\n/** A sidebar row. Exported classes, so a caller's own element can match it. */\nexport const sidebarNavItemClass = [\n  'group/nav-item relative flex min-w-0 items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium',\n  'whitespace-nowrap transition-colors ease-out outline-none select-none',\n  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n  '[&_svg]:size-4 [&_svg]:shrink-0',\n].join(' ')\n\nexport const sidebarNavItemStateClass = {\n  active: 'bg-primary-subtle text-foreground',\n  idle: 'text-muted-foreground hover:bg-surface-hover hover:text-foreground',\n}\n\nexport function SidebarNavItem<T extends ValidComponent = 'a'>(props: SidebarNavItemProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavItemProps, [\n    'class',\n    'active',\n    'nested',\n    'trailing',\n    'children',\n  ])\n\n  return (\n    <Polymorphic\n      as=\"a\"\n      aria-current={local.active ? 'page' : undefined}\n      data-active={local.active ? '' : undefined}\n      class={cn(\n        sidebarNavItemClass,\n        local.active ? sidebarNavItemStateClass.active : sidebarNavItemStateClass.idle,\n        { 'ps-8': local.nested },\n        local.class\n      )}\n      {...(rest as ComponentProps<'a'>)}\n    >\n      {local.children}\n      <Show when={local.trailing}>\n        <span class=\"ms-auto flex shrink-0 items-center gap-1\">{local.trailing}</span>\n      </Show>\n    </Polymorphic>\n  )\n}\n\n/** A row that is a button rather than a destination — \"New project\". */\nexport function SidebarNavButton(props: ComponentProps<'button'>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      class={cn(\n        sidebarNavItemClass,\n        sidebarNavItemStateClass.idle,\n        'w-full disabled:pointer-events-none disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar-nav.js","names":["PolymorphicProps","Polymorphic","ChevronRight","ComponentProps","JSX","ValidComponent","Show","createSignal","splitProps","cn","invokeEventHandler","handler","event","Event","Array","isArray","callback","data","SidebarNavProps","T","class","SidebarNav","props","local","rest","_$createComponent","_$mergeProps","as","aria-label","children","SidebarNavHeader","_el$","_tmpl$","_$spread","SidebarNavTitleProps","SidebarNavTitle","SidebarNavContent","_el$2","_tmpl$2","SidebarNavFooter","_el$3","_tmpl$3","SidebarNavSectionTriggerProps","Omit","onReorder","direction","onClick","onKeyDown","SidebarNavSectionProps","label","collapsible","defaultOpen","open","onOpenChange","triggerProps","count","action","Element","headingAs","SidebarNavSection","uncontrolledOpen","setUncontrolledOpen","setOpen","next","undefined","trigger","triggerRest","heading","when","_el$4","_tmpl$4","_$insert","_el$5","_tmpl$5","_el$6","_tmpl$9","_el$7","firstChild","_$memo","fallback","_el$8","_tmpl$6","aria-expanded","defaultPrevented","altKey","key","preventDefault","stopPropagation","_el$9","_tmpl$7","_el$0","_tmpl$8","SidebarNavItemProps","active","nested","trailing","sidebarNavItemClass","join","sidebarNavItemStateClass","idle","SidebarNavItem","aria-current","data-active","_el$1","_tmpl$0","SidebarNavButton","_el$10","_tmpl$1","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/layout/sidebar-nav/sidebar-nav.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport { ChevronRight } from 'lucide-solid'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, createSignal, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nfunction invokeEventHandler(handler: unknown, event: Event) {\n  if (Array.isArray(handler)) {\n    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n    callback(data, event)\n  } else if (typeof handler === 'function') {\n    ;(handler as (event: Event) => void)(event)\n  }\n}\n\n/**\n * SidebarNav.\n *\n * The secondary navigation column: the list of things inside the destination\n * the rail selected — projects, sessions, files, threads. It is a different\n * object from the rail, not a wider version of it, which is why it is a separate\n * component rather than the rail with labels on.\n *\n * Rows share one recipe with the rail's, so a row in a sidebar and a row in a\n * rail read as the same kind of thing at the same density. That recipe is\n * exactly KiroCrew's nav row: `text-sm font-medium`, `gap-2.5`, `px-3 py-2`,\n * `rounded-md`, `transition-colors`.\n *\n * The width comes from `--sidebar-width`. Sections collapse by default only when\n * the caller says so, because a section that starts collapsed and holds the\n * user's own work is a hidden default.\n */\nexport type SidebarNavProps<T extends ValidComponent = 'nav'> = PolymorphicProps<\n  T,\n  { class?: string; 'aria-label'?: string }\n>\n\nexport function SidebarNav<T extends ValidComponent = 'nav'>(props: SidebarNavProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavProps, ['class', 'aria-label', 'children'])\n\n  return (\n    <Polymorphic\n      as=\"nav\"\n      aria-label={local['aria-label'] ?? 'Section'}\n      class={cn(\n        'bg-sidebar text-sidebar-foreground flex h-full w-sidebar shrink-0 flex-col border-e border-sidebar-border',\n        local.class\n      )}\n      {...(rest as ComponentProps<'nav'>)}\n    >\n      {local.children}\n    </Polymorphic>\n  )\n}\n\nexport function SidebarNavHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-header\"\n      class={cn('flex h-topbar shrink-0 items-center justify-between gap-2 px-3', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type SidebarNavTitleProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  { class?: string }\n>\n\nexport function SidebarNavTitle<T extends ValidComponent = 'div'>(props: SidebarNavTitleProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavTitleProps, ['class'])\n  return (\n    <Polymorphic\n      as=\"div\"\n      data-slot=\"sidebar-nav-title\"\n      class={cn('truncate text-sm font-semibold tracking-tight', local.class)}\n      {...(rest as ComponentProps<'div'>)}\n    />\n  )\n}\n\n/** The scrolling middle of the sidebar. */\nexport function SidebarNavContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-content\"\n      class={cn('flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SidebarNavFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-footer\"\n      class={cn('flex shrink-0 items-center gap-1 border-t border-sidebar-border p-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** Props forwarded to a collapsible section's disclosure button. */\nexport type SidebarNavSectionTriggerProps = Omit<\n  ComponentProps<'button'>,\n  'type' | 'aria-expanded' | 'onClick' | 'onKeyDown' | 'children' | 'class' | 'style'\n> & {\n  /** Called for Alt+ArrowUp/Down; the host owns ordering and row identity. */\n  onReorder?: (direction: 'up' | 'down') => void\n  /** Runs before the section toggle and may cancel it with `preventDefault()`. */\n  onClick?: ComponentProps<'button'>['onClick']\n  /** Runs before shared Alt+Arrow handling and may cancel it with `preventDefault()`. */\n  onKeyDown?: ComponentProps<'button'>['onKeyDown']\n}\n\n/**\n * A titled, collapsible group. Collapsible because a list of projects\n * inevitably outgrows the column, and the user needs to put the ones they are\n * not using away *without* them disappearing into a menu.\n */\nexport type SidebarNavSectionProps = ComponentProps<'div'> & {\n  label: string\n  /** Render a disclosure control instead of a plain heading. */\n  collapsible?: boolean\n  defaultOpen?: boolean\n  /** Controlled disclosure state. When supplied, the host owns changes. */\n  open?: boolean\n  /** Called for user-initiated disclosure changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Native props and reorder callbacks for the disclosure control. */\n  triggerProps?: SidebarNavSectionTriggerProps\n  /** Count shown beside the label. */\n  count?: number\n  /** A control at the trailing edge of the heading row. */\n  action?: JSX.Element\n  /** Semantic heading element for a host's section hierarchy. */\n  headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n}\n\nexport function SidebarNavSection(props: SidebarNavSectionProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'collapsible',\n    'defaultOpen',\n    'open',\n    'onOpenChange',\n    'triggerProps',\n    'count',\n    'action',\n    'headingAs',\n    'children',\n  ])\n  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? true)\n  const open = () => local.open ?? uncontrolledOpen()\n  const setOpen = (next: boolean) => {\n    if (local.open === undefined) setUncontrolledOpen(next)\n    local.onOpenChange?.(next)\n  }\n\n  const [trigger, triggerRest] = splitProps(local.triggerProps ?? {}, [\n    'onClick',\n    'onKeyDown',\n    'onReorder',\n  ])\n\n  const heading = (\n    <>\n      <Show when={local.collapsible}>\n        <ChevronRight\n          aria-hidden=\"true\"\n          class={cn('size-3.5 shrink-0 text-muted-foreground transition-transform ease-out', {\n            'rotate-90': open(),\n          })}\n        />\n      </Show>\n      <span class=\"min-w-0 flex-1 truncate\">{local.label}</span>\n      <Show when={local.count !== undefined}>\n        <span class=\"shrink-0 tabular-nums text-muted-foreground\">{local.count}</span>\n      </Show>\n    </>\n  )\n\n  return (\n    <div data-slot=\"sidebar-nav-section\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <div class=\"group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60\">\n        <Polymorphic\n          as={local.headingAs ?? 'div'}\n          aria-label={local.headingAs ? local.label : undefined}\n          class=\"flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase\"\n        >\n          <Show when={local.collapsible} fallback={heading}>\n            <button\n              {...(triggerRest as ComponentProps<'button'>)}\n              type=\"button\"\n              aria-expanded={open()}\n              onClick={(event) => {\n                invokeEventHandler(trigger.onClick, event)\n                if (event.defaultPrevented) return\n                setOpen(!open())\n              }}\n              onKeyDown={(event) => {\n                invokeEventHandler(trigger.onKeyDown, event)\n                if (event.defaultPrevented || !event.altKey) return\n                if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return\n                event.preventDefault()\n                event.stopPropagation()\n                trigger.onReorder?.(event.key === 'ArrowUp' ? 'up' : 'down')\n              }}\n              class=\"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n            >\n              {heading}\n            </button>\n          </Show>\n        </Polymorphic>\n        <Show when={local.action}>\n          <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100\">\n            {local.action}\n          </span>\n        </Show>\n      </div>\n      <Show when={!local.collapsible || open()}>\n        <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n      </Show>\n    </div>\n  )\n}\n\nexport type SidebarNavItemProps<T extends ValidComponent = 'a'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    active?: boolean\n    /** Indent one level, for a child row such as a branch under a project. */\n    nested?: boolean\n    /** Trailing slot: a count, a status dot, a hover action. */\n    trailing?: JSX.Element\n  }\n>\n\n/** A sidebar row. Exported classes, so a caller's own element can match it. */\nexport const sidebarNavItemClass = [\n  'group/nav-item relative flex min-w-0 items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium',\n  'whitespace-nowrap transition-colors ease-out outline-none select-none',\n  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n  '[&_svg]:size-4 [&_svg]:shrink-0',\n].join(' ')\n\nexport const sidebarNavItemStateClass = {\n  active: 'bg-primary-subtle text-foreground',\n  idle: 'text-muted-foreground hover:bg-surface-hover hover:text-foreground',\n}\n\nexport function SidebarNavItem<T extends ValidComponent = 'a'>(props: SidebarNavItemProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavItemProps, [\n    'class',\n    'active',\n    'nested',\n    'trailing',\n    'children',\n  ])\n\n  return (\n    <Polymorphic\n      as=\"a\"\n      aria-current={local.active ? 'page' : undefined}\n      data-active={local.active ? '' : undefined}\n      class={cn(\n        sidebarNavItemClass,\n        local.active ? sidebarNavItemStateClass.active : sidebarNavItemStateClass.idle,\n        { 'ps-8': local.nested },\n        local.class\n      )}\n      {...(rest as ComponentProps<'a'>)}\n    >\n      {local.children}\n      <Show when={local.trailing}>\n        <span class=\"ms-auto flex shrink-0 items-center gap-1\">{local.trailing}</span>\n      </Show>\n    </Polymorphic>\n  )\n}\n\n/** A row that is a button rather than a destination — \"New project\". */\nexport function SidebarNavButton(props: ComponentProps<'button'>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      class={cn(\n        sidebarNavItemClass,\n        sidebarNavItemStateClass.idle,\n        'w-full disabled:pointer-events-none disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/r/src/components/layout/sidebar-nav/index.ts

@@ -11,6 +11,8 @@ export {
   sidebarNavItemStateClass,
   type SidebarNavItemProps,
   type SidebarNavProps,
+  type SidebarNavSectionProps,
+  type SidebarNavSectionTriggerProps,
   type SidebarNavTitleProps,
 } from './sidebar-nav'
 export {

package/dist/r/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -5,6 +5,15 @@ import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
 import { Show, createSignal, splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
 
+function invokeEventHandler(handler: unknown, event: Event) {
+  if (Array.isArray(handler)) {
+    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]
+    callback(data, event)
+  } else if (typeof handler === 'function') {
+    ;(handler as (event: Event) => void)(event)
+  }
+}
+
 /**
  * SidebarNav.
  *
@@ -96,36 +105,69 @@ export function SidebarNavFooter(props: ComponentProps<'div'>) {
   )
 }
 
+/** Props forwarded to a collapsible section's disclosure button. */
+export type SidebarNavSectionTriggerProps = Omit<
+  ComponentProps<'button'>,
+  'type' | 'aria-expanded' | 'onClick' | 'onKeyDown' | 'children' | 'class' | 'style'
+> & {
+  /** Called for Alt+ArrowUp/Down; the host owns ordering and row identity. */
+  onReorder?: (direction: 'up' | 'down') => void
+  /** Runs before the section toggle and may cancel it with `preventDefault()`. */
+  onClick?: ComponentProps<'button'>['onClick']
+  /** Runs before shared Alt+Arrow handling and may cancel it with `preventDefault()`. */
+  onKeyDown?: ComponentProps<'button'>['onKeyDown']
+}
+
 /**
  * A titled, collapsible group. Collapsible because a list of projects
  * inevitably outgrows the column, and the user needs to put the ones they are
  * not using away *without* them disappearing into a menu.
  */
-export function SidebarNavSection(
-  props: ComponentProps<'div'> & {
-    label: string
-    /** Render a disclosure control instead of a plain heading. */
-    collapsible?: boolean
-    defaultOpen?: boolean
-    /** Count shown beside the label. */
-    count?: number
-    /** A control at the trailing edge of the heading row. */
-    action?: JSX.Element
-    /** Semantic heading element for a host's section hierarchy. */
-    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  }
-) {
+export type SidebarNavSectionProps = ComponentProps<'div'> & {
+  label: string
+  /** Render a disclosure control instead of a plain heading. */
+  collapsible?: boolean
+  defaultOpen?: boolean
+  /** Controlled disclosure state. When supplied, the host owns changes. */
+  open?: boolean
+  /** Called for user-initiated disclosure changes. */
+  onOpenChange?: (open: boolean) => void
+  /** Native props and reorder callbacks for the disclosure control. */
+  triggerProps?: SidebarNavSectionTriggerProps
+  /** Count shown beside the label. */
+  count?: number
+  /** A control at the trailing edge of the heading row. */
+  action?: JSX.Element
+  /** Semantic heading element for a host's section hierarchy. */
+  headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+export function SidebarNavSection(props: SidebarNavSectionProps) {
   const [local, rest] = splitProps(props, [
     'class',
     'label',
     'collapsible',
     'defaultOpen',
+    'open',
+    'onOpenChange',
+    'triggerProps',
     'count',
     'action',
     'headingAs',
     'children',
   ])
-  const [open, setOpen] = createSignal(local.defaultOpen ?? true)
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? true)
+  const open = () => local.open ?? uncontrolledOpen()
+  const setOpen = (next: boolean) => {
+    if (local.open === undefined) setUncontrolledOpen(next)
+    local.onOpenChange?.(next)
+  }
+
+  const [trigger, triggerRest] = splitProps(local.triggerProps ?? {}, [
+    'onClick',
+    'onKeyDown',
+    'onReorder',
+  ])
 
   const heading = (
     <>
@@ -154,9 +196,22 @@ export function SidebarNavSection(
         >
           <Show when={local.collapsible} fallback={heading}>
             <button
+              {...(triggerRest as ComponentProps<'button'>)}
               type="button"
               aria-expanded={open()}
-              onClick={() => setOpen((value) => !value)}
+              onClick={(event) => {
+                invokeEventHandler(trigger.onClick, event)
+                if (event.defaultPrevented) return
+                setOpen(!open())
+              }}
+              onKeyDown={(event) => {
+                invokeEventHandler(trigger.onKeyDown, event)
+                if (event.defaultPrevented || !event.altKey) return
+                if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+                event.preventDefault()
+                event.stopPropagation()
+                trigger.onReorder?.(event.key === 'ArrowUp' ? 'up' : 'down')
+              }}
               class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
             >
               {heading}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.87.0",
+  "version": "0.88.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/src/components/layout/sidebar-nav/index.ts

@@ -11,6 +11,8 @@ export {
   sidebarNavItemStateClass,
   type SidebarNavItemProps,
   type SidebarNavProps,
+  type SidebarNavSectionProps,
+  type SidebarNavSectionTriggerProps,
   type SidebarNavTitleProps,
 } from './sidebar-nav'
 export {

package/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -5,6 +5,15 @@ import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
 import { Show, createSignal, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 
+function invokeEventHandler(handler: unknown, event: Event) {
+  if (Array.isArray(handler)) {
+    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]
+    callback(data, event)
+  } else if (typeof handler === 'function') {
+    ;(handler as (event: Event) => void)(event)
+  }
+}
+
 /**
  * SidebarNav.
  *
@@ -96,36 +105,69 @@ export function SidebarNavFooter(props: ComponentProps<'div'>) {
   )
 }
 
+/** Props forwarded to a collapsible section's disclosure button. */
+export type SidebarNavSectionTriggerProps = Omit<
+  ComponentProps<'button'>,
+  'type' | 'aria-expanded' | 'onClick' | 'onKeyDown' | 'children' | 'class' | 'style'
+> & {
+  /** Called for Alt+ArrowUp/Down; the host owns ordering and row identity. */
+  onReorder?: (direction: 'up' | 'down') => void
+  /** Runs before the section toggle and may cancel it with `preventDefault()`. */
+  onClick?: ComponentProps<'button'>['onClick']
+  /** Runs before shared Alt+Arrow handling and may cancel it with `preventDefault()`. */
+  onKeyDown?: ComponentProps<'button'>['onKeyDown']
+}
+
 /**
  * A titled, collapsible group. Collapsible because a list of projects
  * inevitably outgrows the column, and the user needs to put the ones they are
  * not using away *without* them disappearing into a menu.
  */
-export function SidebarNavSection(
-  props: ComponentProps<'div'> & {
-    label: string
-    /** Render a disclosure control instead of a plain heading. */
-    collapsible?: boolean
-    defaultOpen?: boolean
-    /** Count shown beside the label. */
-    count?: number
-    /** A control at the trailing edge of the heading row. */
-    action?: JSX.Element
-    /** Semantic heading element for a host's section hierarchy. */
-    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  }
-) {
+export type SidebarNavSectionProps = ComponentProps<'div'> & {
+  label: string
+  /** Render a disclosure control instead of a plain heading. */
+  collapsible?: boolean
+  defaultOpen?: boolean
+  /** Controlled disclosure state. When supplied, the host owns changes. */
+  open?: boolean
+  /** Called for user-initiated disclosure changes. */
+  onOpenChange?: (open: boolean) => void
+  /** Native props and reorder callbacks for the disclosure control. */
+  triggerProps?: SidebarNavSectionTriggerProps
+  /** Count shown beside the label. */
+  count?: number
+  /** A control at the trailing edge of the heading row. */
+  action?: JSX.Element
+  /** Semantic heading element for a host's section hierarchy. */
+  headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}
+
+export function SidebarNavSection(props: SidebarNavSectionProps) {
   const [local, rest] = splitProps(props, [
     'class',
     'label',
     'collapsible',
     'defaultOpen',
+    'open',
+    'onOpenChange',
+    'triggerProps',
     'count',
     'action',
     'headingAs',
     'children',
   ])
-  const [open, setOpen] = createSignal(local.defaultOpen ?? true)
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? true)
+  const open = () => local.open ?? uncontrolledOpen()
+  const setOpen = (next: boolean) => {
+    if (local.open === undefined) setUncontrolledOpen(next)
+    local.onOpenChange?.(next)
+  }
+
+  const [trigger, triggerRest] = splitProps(local.triggerProps ?? {}, [
+    'onClick',
+    'onKeyDown',
+    'onReorder',
+  ])
 
   const heading = (
     <>
@@ -154,9 +196,22 @@ export function SidebarNavSection(
         >
           <Show when={local.collapsible} fallback={heading}>
             <button
+              {...(triggerRest as ComponentProps<'button'>)}
               type="button"
               aria-expanded={open()}
-              onClick={() => setOpen((value) => !value)}
+              onClick={(event) => {
+                invokeEventHandler(trigger.onClick, event)
+                if (event.defaultPrevented) return
+                setOpen(!open())
+              }}
+              onKeyDown={(event) => {
+                invokeEventHandler(trigger.onKeyDown, event)
+                if (event.defaultPrevented || !event.altKey) return
+                if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+                event.preventDefault()
+                event.stopPropagation()
+                trigger.onReorder?.(event.key === 'ArrowUp' ? 'up' : 'down')
+              }}
               class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
             >
               {heading}