@adea-ai/ui 0.87.0 → 0.89.1

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/dist/r/src/components/layout/top-bar/top-bar.tsx

@@ -41,7 +41,7 @@ export function TopBar(props: TopBarProps) {
     <header
       data-slot="top-bar"
       class={cn(
-        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)] items-center gap-3 border-b border-border px-3',
+        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         local.macosInset && 'window-inset-macos',
@@ -61,7 +61,7 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
     <div
       data-slot="top-bar-section"
       class={cn(
-        'flex min-w-0 items-center gap-2 overflow-hidden',
+        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',
         local.align === 'end' && 'justify-end',
         local.align !== 'end' && 'justify-start',
         local.class
@@ -71,12 +71,16 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
   )
 }
 
-export function TopBarTitle(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export function TopBarTitle(props: ComponentProps<'div'> & { align?: 'start' | 'center' }) {
+  const [local, rest] = splitProps(props, ['class', 'align'])
   return (
     <div
       data-slot="top-bar-title"
-      class={cn('truncate text-sm font-medium', local.class)}
+      class={cn(
+        'truncate text-sm font-medium',
+        local.align === 'center' && 'text-center',
+        local.class
+      )}
       {...rest}
     />
   )

package/dist/r/src/components/ui/tabs/tabs.tsx

@@ -1,8 +1,31 @@
 import { Tabs as KobalteTabs } from '@kobalte/core/tabs'
-import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import type { Accessor, ComponentProps } from 'solid-js'
+import {
+  createContext,
+  createRenderEffect,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+  splitProps,
+  useContext,
+} from 'solid-js'
 import { cn } from '../../../lib/utils'
 
+type TabsIdContextValue = {
+  id: Accessor<string>
+  triggerIds: Accessor<ReadonlyMap<string, string>>
+  registerTriggerId: (value: string, id: string) => void
+  unregisterTriggerId: (value: string, id: string) => void
+}
+
+const TabsIdContext = createContext<TabsIdContextValue>()
+
+function useTabsId() {
+  const tabs = useContext(TabsIdContext)
+  if (!tabs) throw new Error('[adea-ui]: Tabs parts must be used within Tabs.')
+  return tabs
+}
+
 /**
  * Tabs.
  *
@@ -14,12 +37,37 @@ import { cn } from '../../../lib/utils'
  * where a full-width underline would collide with the panel's own header rule.
  */
 export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
-  const [local, rest] = splitProps(props, ['class'])
+  const [local, rest] = splitProps(props, ['class', 'id'])
+  const generatedId = `tabs-${createUniqueId()}`
+  const id = () => local.id ?? generatedId
+  const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())
+  const tabs: TabsIdContextValue = {
+    id,
+    triggerIds,
+    registerTriggerId: (value, triggerId) => {
+      setTriggerIds((current) => new Map(current).set(value, triggerId))
+    },
+    unregisterTriggerId: (value, triggerId) => {
+      setTriggerIds((current) => {
+        if (current.get(value) !== triggerId) return current
+        const next = new Map(current)
+        next.delete(value)
+        return next
+      })
+    },
+  }
+
   return (
-    <KobalteTabs
-      class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', local.class)}
-      {...rest}
-    />
+    <TabsIdContext.Provider value={tabs}>
+      <KobalteTabs
+        id={id()}
+        class={cn(
+          'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',
+          local.class
+        )}
+        {...rest}
+      />
+    </TabsIdContext.Provider>
   )
 }
 
@@ -50,10 +98,21 @@ export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {
 }
 
 export function TabsTrigger(props: TabsTriggerProps) {
-  const [local, rest] = splitProps(props, ['class', 'appearance'])
+  const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])
+  const tabs = useTabsId()
+  const triggerId = () => local.id ?? `${tabs.id()}-trigger-${rest.value}`
+
+  // Register before panels render, including SSR where createEffect is skipped.
+  createRenderEffect(() => {
+    const value = rest.value
+    const id = triggerId()
+    tabs.registerTriggerId(value, id)
+    onCleanup(() => tabs.unregisterTriggerId(value, id))
+  })
 
   return (
     <KobalteTabs.Trigger
+      id={triggerId()}
       class={cn(
         'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',
         'transition-colors ease-out outline-none select-none',
@@ -72,6 +131,17 @@ export function TabsTrigger(props: TabsTriggerProps) {
 }
 
 export function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <KobalteTabs.Content class={cn('flex-1 outline-none', local.class)} {...rest} />
+  const [local, rest] = splitProps(props, ['class', 'aria-labelledby'])
+  const tabs = useTabsId()
+  return (
+    <KobalteTabs.Content
+      aria-labelledby={
+        local['aria-labelledby'] ??
+        tabs.triggerIds().get(rest.value) ??
+        `${tabs.id()}-trigger-${rest.value}`
+      }
+      class={cn('min-h-0 min-w-0 flex-1 outline-none', local.class)}
+      {...rest}
+    />
+  )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.87.0",
+  "version": "0.89.1",
   "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",
@@ -107,6 +107,7 @@
     "check:packed-layout-renderer": "bun scripts/check-packed-layout-renderer.ts",
     "check:packed-appearance": "bun scripts/check-packed-appearance.ts",
     "check:packed-native-select": "bun scripts/check-packed-native-select.ts",
+    "check:packed-settings-navigation": "bun scripts/check-packed-settings-navigation.ts",
     "check:packed-paste-model": "node scripts/check-packed-paste-model.mjs"
   },
   "dependencies": {

package/registry.json

@@ -1960,6 +1960,8 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/sidebar-nav",
+        "@adea-ai/ui/tabs",
         "lib"
       ],
       "files": [
@@ -1968,6 +1970,16 @@
           "type": "registry:ui",
           "target": "components/composites/settings/index.ts"
         },
+        {
+          "path": "src/components/composites/settings/settings-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-layout.tsx"
+        },
+        {
+          "path": "src/components/composites/settings/settings-navigation.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-navigation.tsx"
+        },
         {
           "path": "src/components/composites/settings/settings.tsx",
           "type": "registry:ui",

package/src/components/composites/settings/index.ts

@@ -1 +1,8 @@
 export { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings'
+export { SettingsLayout, type SettingsLayoutProps } from './settings-layout'
+export {
+  SettingsNavigation,
+  type SettingsNavigationGroup,
+  type SettingsNavigationItem,
+  type SettingsNavigationProps,
+} from './settings-navigation'

package/src/components/composites/settings/settings-layout.tsx

@@ -0,0 +1,65 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Tabs } from '../../ui/tabs'
+import { SettingsNavigation, type SettingsNavigationGroup } from './settings-navigation'
+
+export type SettingsLayoutProps = Omit<
+  ComponentProps<typeof Tabs>,
+  'children' | 'orientation' | 'value' | 'defaultValue' | 'onChange'
+> & {
+  /** Grouped navigation entries; the host owns their values and panel content. */
+  groups: readonly SettingsNavigationGroup[]
+  /** Accessible name for the vertical tab list. */
+  'aria-label': string
+  /** The host-controlled selected destination. */
+  value: string
+  /** Updates the host-controlled selected destination. */
+  onChange: (value: string) => void
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Panels must be rendered as `TabsContent` descendants. */
+  children?: JSX.Element
+}
+
+/**
+ * SettingsLayout.
+ *
+ * A controlled, vertical settings rail beside its scrollable panel viewport.
+ * The host keeps ownership of selection, URL/hash state and panel content.
+ * At narrow viewports the rail contracts while both columns remain shrinkable.
+ */
+export function SettingsLayout(props: SettingsLayoutProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'groups',
+    'aria-label',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+
+  return (
+    <Tabs
+      {...rest}
+      orientation="vertical"
+      value={local.value}
+      class={cn('min-h-0 min-w-0 flex-1 gap-0', local.class)}
+    >
+      <SettingsNavigation
+        aria-label={local['aria-label']}
+        groups={local.groups}
+        value={local.value}
+        onReselect={local.onReselect}
+        revealSelected={local.revealSelected}
+        class="w-24 md:w-sidebar"
+      />
+      <div data-slot="settings-layout-panels" class="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
+        {local.children}
+      </div>
+    </Tabs>
+  )
+}

package/src/components/composites/settings/settings-navigation.tsx

@@ -0,0 +1,135 @@
+import type { JSX } from 'solid-js'
+import { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'
+import { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'
+
+/** One host-owned destination in a settings tab list. Values must be unique. */
+export type SettingsNavigationItem = {
+  value: string
+  label: string
+  icon?: JSX.Element
+  disabled?: boolean
+}
+
+/** A visible, accessibly named group of settings destinations. */
+export type SettingsNavigationGroup = {
+  label: string
+  items: readonly SettingsNavigationItem[]
+}
+
+export type SettingsNavigationProps = Omit<
+  TabsListProps,
+  'appearance' | 'children' | 'orientation'
+> & {
+  /** Groups are presentation only; the host owns the tab values and panels. */
+  groups: readonly SettingsNavigationGroup[]
+  /** The same controlled value supplied to the enclosing `Tabs`. */
+  value: string
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Every tab list needs a label independent of its visible group headings. */
+  'aria-label': string
+}
+
+/**
+ * SettingsNavigation.
+ *
+ * A grouped vertical tab list for sibling settings panels. It composes the
+ * shared Tabs behaviour with the shared sidebar row recipe; the host supplies
+ * the controlled value, panel content, icons and any persistence or routing.
+ * Use ordinary tabs for a short, ungrouped row of view choices.
+ *
+ * Kobalte owns roving focus, arrow keys, selection and tab/panel ARIA. This
+ * component adds no URL, storage or host-specific state. Set
+ * `revealSelected={false}` when the surrounding layout does not use an internal
+ * scrolling viewport.
+ */
+export function SettingsNavigation(props: SettingsNavigationProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'aria-label',
+    'groups',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+  const triggers = new Map<string, HTMLButtonElement>()
+  const groupIdPrefix = `settings-navigation-${createUniqueId()}`
+
+  createEffect(() => {
+    const value = local.value
+    const reveal = local.revealSelected
+    if (reveal === false) return
+
+    const revealCurrent = () => {
+      const trigger = triggers.get(value)
+      if (typeof reveal === 'function') reveal(trigger)
+      else trigger?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    }
+
+    revealCurrent()
+    window.addEventListener('resize', revealCurrent)
+    onCleanup(() => window.removeEventListener('resize', revealCurrent))
+  })
+
+  return (
+    <TabsList
+      data-slot="settings-navigation"
+      aria-label={local['aria-label']}
+      orientation="vertical"
+      class={cn(
+        'flex max-h-full min-h-0 min-w-0 shrink-0 flex-col items-stretch justify-start gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.groups.map((group, groupIndex) => {
+        const groupId = `${groupIdPrefix}-group-${groupIndex}`
+        return (
+          <div
+            role="none"
+            data-slot="settings-navigation-group"
+            class="flex min-w-0 flex-col gap-0.5"
+          >
+            <span id={groupId} class="sr-only">
+              {group.label}
+            </span>
+            <span
+              aria-hidden="true"
+              class="px-2 py-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
+            >
+              {group.label}
+            </span>
+            {group.items.map((item) => (
+              <TabsTrigger
+                data-slot="settings-navigation-trigger"
+                orientation="vertical"
+                aria-describedby={groupId}
+                value={item.value}
+                disabled={item.disabled}
+                ref={(element: HTMLButtonElement | undefined) => {
+                  if (element) triggers.set(item.value, element)
+                  else triggers.delete(item.value)
+                }}
+                onClick={() => {
+                  if (local.value === item.value) local.onReselect?.(item.value)
+                }}
+                class={cn(
+                  sidebarNavItemClass,
+                  sidebarNavItemStateClass.idle,
+                  'h-row-lg w-full justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground'
+                )}
+              >
+                {item.icon}
+                <span class="min-w-0 truncate">{item.label}</span>
+              </TabsTrigger>
+            ))}
+          </div>
+        )
+      })}
+    </TabsList>
+  )
+}

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}