@adea-ai/ui 0.106.2 → 0.108.0

package/src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx

@@ -0,0 +1,177 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../ui/resizable'
+import { createSignal, onCleanup } from 'solid-js'
+import { cn } from '#lib/utils'
+
+export type PixelResizeHandleProps = {
+  /** Which physical edge of the ruler the resizable surface is attached to. */
+  side: 'left' | 'right'
+  /** Current width in CSS pixels. */
+  value: number
+  minimum: number
+  maximum: number
+  step?: number
+  label?: string
+  controls?: string
+  class?: string
+  onChange(value: number): void
+  onCommit?(value: number): void
+}
+
+/**
+ * PixelResizeHandle.
+ *
+ * A keyboard- and pointer-operable edge ruler for a host-owned pane. Keep the
+ * pane's actual width and any persistence in its layout owner; this component
+ * reports a bounded pixel value and places the shared resizable grip at the
+ * matching left or right edge.
+ *
+ * Corvu 0.2.5 supplies geometry, keyboard resizing, ARIA and the shared grip,
+ * but its global drag handler does not end on pointer cancellation. Prevent
+ * that handler through its public start hook and use local pointer capture
+ * for bounded pixel gestures, including cancellation and lost capture.
+ */
+export function PixelResizeHandle(props: PixelResizeHandleProps) {
+  const maximum = () => Math.max(1, props.maximum)
+  const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))
+  const value = () => Math.min(maximum(), Math.max(minimum(), Math.round(props.value)))
+  const ratio = () => value() / maximum()
+  const isRight = () => props.side === 'right'
+  const rulerSizes = () => (isRight() ? [1 - ratio(), ratio()] : [ratio(), 1 - ratio()])
+  const commit = () => props.onCommit?.(value())
+  let interacting = false
+  const [drag, setDrag] = createSignal<{
+    pointerId: number
+    startX: number
+    startValue: number
+    handle: HTMLElement
+  }>()
+  const endPointer = (shouldCommit: boolean) => {
+    const current = drag()
+    if (!current) return
+    setDrag(undefined)
+    if (current.handle.hasPointerCapture(current.pointerId))
+      current.handle.releasePointerCapture(current.pointerId)
+    if (shouldCommit) commit()
+  }
+  const endKeyboard = () => {
+    const wasInteracting = interacting
+    interacting = false
+    if (wasInteracting) commit()
+  }
+  onCleanup(() => {
+    endKeyboard()
+    endPointer(false)
+  })
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      dir="ltr"
+      sizes={rulerSizes()}
+      keyboardDelta={`${props.step ?? 16}px`}
+      style={{ width: `${maximum()}px` }}
+      class={cn(
+        'pointer-events-none absolute inset-y-0 flex',
+        {
+          'left-0': props.side === 'left',
+          'right-0': props.side === 'right',
+        },
+        props.class
+      )}
+      onSizesChange={(sizes) => {
+        // Panel registration and teardown also emit sizes. Only user resizing
+        // may update the host preference; collapsing must preserve its width.
+        if (!interacting || sizes.length !== 2) return
+        const next = Math.round((sizes[isRight() ? 1 : 0] ?? ratio()) * maximum())
+        const bounded = Math.min(maximum(), Math.max(minimum(), next))
+        if (bounded !== value()) props.onChange(bounded)
+      }}
+    >
+      <ResizablePanel
+        minSize={isRight() ? 0 : minimum() / maximum()}
+        maxSize={1}
+        aria-hidden="true"
+      />
+      <ResizableHandle
+        withHandle
+        label={props.label ?? `Resize ${props.side} pane`}
+        aria-controls={props.controls}
+        aria-valuemin={minimum()}
+        aria-valuemax={maximum()}
+        aria-valuenow={value()}
+        aria-valuetext={`${value()} pixels`}
+        data-dragging={drag() ? '' : undefined}
+        onHandleDragStart={(event) => {
+          // Corvu checks defaultPrevented before starting its global handler.
+          event.preventDefault()
+          if (event.button !== 0 || !event.isPrimary) return
+          const handle = event.currentTarget
+          if (!(handle instanceof HTMLElement)) return
+          endPointer(false)
+          interacting = false
+          handle.focus()
+          handle.setPointerCapture(event.pointerId)
+          setDrag({
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startValue: value(),
+            handle,
+          })
+        }}
+        onPointerMove={(event: PointerEvent) => {
+          const current = drag()
+          if (!current || event.pointerId !== current.pointerId) return
+          if (!current.handle.hasPointerCapture(current.pointerId)) {
+            endPointer(false)
+            return
+          }
+          const delta = (event.clientX - current.startX) * (isRight() ? -1 : 1)
+          const next = Math.min(
+            maximum(),
+            Math.max(minimum(), Math.round(current.startValue + delta))
+          )
+          if (next !== value()) props.onChange(next)
+        }}
+        onPointerUp={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(true)
+        }}
+        onPointerCancel={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(false)
+        }}
+        onLostPointerCapture={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(false)
+        }}
+        onBlur={() => {
+          endKeyboard()
+          endPointer(false)
+        }}
+        onKeyDown={(event) => {
+          const current = drag()
+          if (current && !current.handle.hasPointerCapture(current.pointerId)) endPointer(false)
+          if (drag()) {
+            event.preventDefault()
+            return
+          }
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) interacting = true
+          // Corvu operates on physical panel order. Home/End here describe
+          // the controlled pane width, including a pane after the separator.
+          if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault()
+            props.onChange(event.key === 'Home' ? minimum() : maximum())
+          }
+        }}
+        onKeyUp={(event) => {
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+            endKeyboard()
+          }
+        }}
+        class="pointer-events-auto"
+      />
+      <ResizablePanel
+        minSize={isRight() ? minimum() / maximum() : 0}
+        maxSize={1}
+        aria-hidden="true"
+      />
+    </ResizablePanelGroup>
+  )
+}

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

@@ -1,59 +1,11 @@
-import Resizable from '@corvu/resizable'
-import { cn } from '#lib/utils'
+import {
+  PixelResizeHandle,
+  type PixelResizeHandleProps,
+} from '../pixel-resize-handle/pixel-resize-handle'
 
-export type SidebarNavResizeHandleProps = {
-  value: number
-  minimum: number
-  maximum: number
-  step?: number
-  label?: string
-  controls?: string
-  class?: string
-  onChange(value: number): void
-  onCommit?(value: number): void
-}
+export type SidebarNavResizeHandleProps = Omit<PixelResizeHandleProps, 'side'>
 
-/**
- * Resize a contextual sidebar without making its host recreate a separator
- * widget. Corvu owns pointer capture, cancellation, constraints, keyboard
- * movement and cleanup. Its two invisible panels provide a bounded pixel
- * ruler; the host retains the real pane layout and preference persistence.
- * Place this inside the positioned sidebar. The ruler can extend over the
- * adjacent content, but only its handle participates in pointer hit testing.
- */
+/** Keep the established left-sidebar API as a thin adapter over the shared edge ruler. */
 export function SidebarNavResizeHandle(props: SidebarNavResizeHandleProps) {
-  const maximum = () => Math.max(1, props.maximum)
-  const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))
-  const value = () => Math.min(maximum(), Math.max(minimum(), props.value))
-  const commit = () => props.onCommit?.(value())
-
-  return (
-    <Resizable
-      orientation="horizontal"
-      sizes={[value() / maximum(), 1 - value() / maximum()]}
-      keyboardDelta={`${props.step ?? 16}px`}
-      style={{ width: `${maximum()}px` }}
-      class={cn('pointer-events-none absolute inset-y-0 start-0 flex', props.class)}
-      onSizesChange={(sizes) => {
-        const next = Math.round((sizes[0] ?? 0) * maximum())
-        if (next !== value()) props.onChange(Math.min(maximum(), Math.max(minimum(), next)))
-      }}
-    >
-      <Resizable.Panel minSize={minimum() / maximum()} maxSize={1} aria-hidden="true" />
-      <Resizable.Handle
-        aria-label={props.label ?? 'Resize navigation'}
-        aria-controls={props.controls}
-        aria-orientation="vertical"
-        aria-valuemin={minimum()}
-        aria-valuemax={maximum()}
-        aria-valuenow={value()}
-        onHandleDragEnd={commit}
-        onKeyUp={(event) => {
-          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) commit()
-        }}
-        class="pointer-events-auto relative z-(--z-docked) w-px -translate-x-full shrink-0 bg-transparent after:absolute after:inset-y-0 after:-inset-x-1 after:w-3 hover:bg-primary focus-visible:bg-primary focus-visible:ring-3 focus-visible:ring-primary-subtle focus-visible:outline-none"
-      />
-      <Resizable.Panel minSize={0} aria-hidden="true" />
-    </Resizable>
-  )
+  return <PixelResizeHandle {...props} side="left" label={props.label ?? 'Resize navigation'} />
 }

package/src/components/ui/badge/badge.tsx

@@ -19,11 +19,15 @@ export const badgeVariants = cva(
         default: 'bg-primary text-primary-foreground',
         secondary: 'bg-secondary text-secondary-foreground',
         outline: 'border-border text-foreground',
-        /** Tinted status fills, for counts and states rather than actions. */
-        success: 'bg-success-subtle text-foreground',
-        warning: 'bg-warning-subtle text-foreground',
-        destructive: 'bg-destructive-subtle text-foreground',
-        info: 'bg-info-subtle text-foreground',
+        /**
+         * Tinted status fills, for counts and states rather than actions. The
+         * word stays in `foreground` for contrast; the glyph takes the status
+         * hue, so tags of different tones read apart at a glance.
+         */
+        success: 'bg-success-subtle text-foreground [&_svg]:text-success',
+        warning: 'bg-warning-subtle text-foreground [&_svg]:text-warning',
+        destructive: 'bg-destructive-subtle text-foreground [&_svg]:text-destructive',
+        info: 'bg-info-subtle text-foreground [&_svg]:text-info',
         subtle: 'bg-primary-subtle text-primary',
         /**
          * A count that asks for attention, pinned to a corner of another control

package/src/components/ui/combobox/combobox.tsx

@@ -2,7 +2,7 @@ import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'
 import { Check, ChevronDown, X } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
-import { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'
+import { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '#lib/overlay'
 import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
@@ -108,6 +108,7 @@ export function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Con
   return (
     <KobalteCombobox.Portal>
       <KobalteCombobox.Content
+        {...topLayerProps}
         class={cn(
           'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',
           'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',

package/src/components/ui/context-menu/context-menu.tsx

@@ -10,6 +10,7 @@ import {
   menuSeparator,
   overlayMotion,
   overlaySurface,
+  topLayerProps,
 } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
@@ -40,6 +41,7 @@ export function ContextMenuContent(props: ComponentProps<typeof KobalteContextMe
   return (
     <KobalteContextMenu.Portal>
       <KobalteContextMenu.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -174,6 +176,7 @@ export function ContextMenuSubContent(props: ComponentProps<typeof KobalteContex
   return (
     <KobalteContextMenu.Portal>
       <KobalteContextMenu.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,

package/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -11,6 +11,7 @@ import {
   overlayMotion,
   overlaySurface,
   popoverArrow,
+  topLayerProps,
 } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
@@ -148,6 +149,12 @@ export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdown
     const isNativeLink = trigger instanceof HTMLAnchorElement && trigger.hasAttribute('href')
     if (trigger instanceof HTMLElement && !isNativeLink) {
       trigger.focus({ preventScroll: true })
+      // Focusing first is not enough in WebKit: the press's default mousedown
+      // action runs afterwards and moves focus off a button to the nearest
+      // focusable ancestor — inside a dialog, the dialog — so the menu that
+      // just opened still reads focus leaving it and closes. Cancelling the
+      // default keeps focus where it was put.
+      if (event.pointerType !== 'touch') event.preventDefault()
     }
   }
   const onKeyDown = (event: DropdownMenuTriggerKeyEvent) => {
@@ -196,6 +203,7 @@ export function DropdownMenuContent(props: DropdownMenuContentProps) {
   return (
     <KobalteDropdownMenu.Portal mount={local.portalMount}>
       <KobalteDropdownMenu.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -372,6 +380,7 @@ export function DropdownMenuSubContent(
   return (
     <KobalteDropdownMenu.Portal>
       <KobalteDropdownMenu.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,

package/src/components/ui/menubar/menubar.tsx

@@ -11,6 +11,7 @@ import {
   overlayMotion,
   overlaySurface,
   popoverArrow,
+  topLayerProps,
 } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
@@ -71,6 +72,7 @@ export function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Conte
   return (
     <KobalteMenubar.Portal>
       <KobalteMenubar.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -201,6 +203,7 @@ export function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.Su
   return (
     <KobalteMenubar.Portal>
       <KobalteMenubar.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,

package/src/components/ui/popover/popover.tsx

@@ -1,7 +1,13 @@
 import { Popover as KobaltePopover } from '@kobalte/core/popover'
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
-import { menuContentPadding, popoverArrow, popoverMotion, overlaySurface } from '#lib/overlay'
+import {
+  menuContentPadding,
+  popoverArrow,
+  popoverMotion,
+  overlaySurface,
+  topLayerProps,
+} from '#lib/overlay'
 import { cn } from '#lib/utils'
 
 /**
@@ -39,6 +45,7 @@ export function PopoverContent(props: PopoverContentProps) {
   return (
     <KobaltePopover.Portal>
       <KobaltePopover.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           popoverMotion,

package/src/components/ui/resizable/resizable.tsx

@@ -17,7 +17,7 @@ import { cn } from '#lib/utils'
  * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.
  */
 /**
- * Whether the group was given `initialSizes`. Those are corvu's to apply, and a
+ * Whether the group was given `initialSizes` or controlled `sizes`. Those are corvu's to apply, and a
  * panel's own `initialSize` overrides them — so an unsized panel must not invent
  * one when the group already has an answer.
  */
@@ -27,7 +27,9 @@ export function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & {
   const [local, rest] = splitProps(props, ['class'])
 
   return (
-    <GroupSizesContext.Provider value={() => rest.initialSizes !== undefined}>
+    <GroupSizesContext.Provider
+      value={() => rest.initialSizes !== undefined || rest.sizes !== undefined}
+    >
       <Resizable
         class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
         {...rest}

package/src/components/ui/select/select.tsx

@@ -2,7 +2,7 @@ import { Select as KobalteSelect } from '@kobalte/core/select'
 import { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
-import { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'
+import { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
 /**
@@ -140,6 +140,7 @@ export function SelectContent(props: SelectContentProps) {
   return (
     <KobalteSelect.Portal mount={local.portalMount}>
       <KobalteSelect.Content
+        {...topLayerProps}
         class={cn(
           'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',
           'z-(--z-menu) max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-select-content-transform-origin) overflow-y-auto overflow-x-hidden',

package/src/components/ui/sheet/sheet.tsx

@@ -24,31 +24,79 @@ import { headingVariants } from '../typography'
  * `end`, and a full-width row for `top` and `bottom`. The slide-in direction
  * follows from the side, so a caller never pairs them by hand.
  *
+ * `variant` decides how it meets that edge. `inset` — the default for `end` —
+ * docks the panel inside the main view: below the top bar, one equal gap from
+ * the top bar, the end edge and the bottom, with no scrim, so the work it edits
+ * stays visible and the top bar stays reachable. It is the shape for editing one
+ * thing beside its context (appearance settings, a task, a record). `edge` runs
+ * edge to edge over a scrim — the shape of a navigation drawer, and the default
+ * for every other side.
+ *
+ * Its parts read alike everywhere: `SheetHeader` holds a heading, a description
+ * and a full-width rule beneath, with the close button in the corner;
+ * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that
+ * holds the decision.
+ *
  * Controlled sheets opened from outside a `SheetTrigger` restore focus to the
  * element focused before opening. Pass `restoreFocusRef` when a stable external
  * opener must be used instead, such as when another layer closes before the
  * sheet opens.
  */
+// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be
+// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the
+// pinned footer out of view. Only SheetBody scrolls.
 const sheetVariants = cva(
-  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col gap-4 border-border shadow-lg',
+  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b data-expanded:slide-in-from-top data-closed:slide-out-to-top',
-        bottom:
-          'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',
-        start:
-          'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e data-expanded:slide-in-from-left data-closed:slide-out-to-left',
-        end: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s data-expanded:slide-in-from-right data-closed:slide-out-to-right',
+        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',
+        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',
+        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',
+        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',
+      },
+      variant: {
+        edge: '',
+        inset: 'panel-dialog-inset w-lg rounded-xl border',
       },
     },
-    defaultVariants: { side: 'end' },
+    compoundVariants: [
+      {
+        side: 'top',
+        variant: 'edge',
+        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',
+      },
+      {
+        side: 'bottom',
+        variant: 'edge',
+        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',
+      },
+      {
+        side: 'start',
+        variant: 'edge',
+        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',
+      },
+      {
+        side: 'end',
+        variant: 'edge',
+        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',
+      },
+    ],
+    defaultVariants: { side: 'end', variant: 'edge' },
   }
 )
 
+/** `inset` for the end edge, `edge` for every other side, unless the caller says. */
+const sheetVariantFor = (
+  side: SheetContentProps['side'],
+  variant: SheetContentProps['variant']
+): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')
+
 export type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &
   VariantProps<typeof sheetVariants> & {
     closeButton?: JSX.Element | false
+    /** The close button's accessible name. Defaults to "Close". */
+    closeLabel?: string
     /** Supplies the stable external element to focus when the controlled sheet closes. */
     restoreFocusRef?: Accessor<HTMLElement | undefined>
   }
@@ -57,8 +105,10 @@ export function SheetContent(props: SheetContentProps) {
   const [local, rest] = splitProps(props, [
     'class',
     'side',
+    'variant',
     'children',
     'closeButton',
+    'closeLabel',
     'restoreFocusRef',
     'onOpenAutoFocus',
     'onCloseAutoFocus',
@@ -71,12 +121,19 @@ export function SheetContent(props: SheetContentProps) {
     onCloseAutoFocus: local.onCloseAutoFocus,
   })
 
+  const variant = () => sheetVariantFor(local.side, local.variant)
+
   return (
     <KobalteDialog.Portal>
-      <DialogOverlay />
+      {/* An inset panel is beside the work, so the work stays in view: no scrim.
+          It is still modal — focus stays inside and an outside click dismisses. */}
+      <Show when={variant() === 'edge'}>
+        <DialogOverlay />
+      </Show>
       <KobalteDialogContent
+        data-variant={variant()}
         class={cn(
-          sheetVariants({ side: local.side }),
+          sheetVariants({ side: local.side, variant: variant() }),
           'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',
           'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',
           local.class
@@ -92,7 +149,7 @@ export function SheetContent(props: SheetContentProps) {
               WebKit walks only explicit tabindex and form controls) would skip
               an implicitly-tabbable button and jump past the sheet's end. */}
           <KobalteDialog.CloseButton
-            aria-label="Close"
+            aria-label={local.closeLabel ?? 'Close'}
             tabindex="0"
             class="absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
           >
@@ -122,7 +179,10 @@ export function SheetHeader(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-header"
-      class={cn('flex flex-col gap-1.5 border-b border-border p-4 pe-12 text-start', local.class)}
+      class={cn(
+        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',
+        local.class
+      )}
       {...rest}
     />
   )
@@ -133,7 +193,7 @@ export function SheetBody(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-body"
-      class={cn('flex-1 overflow-y-auto px-4 pb-4', local.class)}
+      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}
       {...rest}
     />
   )
@@ -144,7 +204,10 @@ export function SheetFooter(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-footer"
-      class={cn('flex items-center justify-end gap-2 border-t border-border p-4', local.class)}
+      class={cn(
+        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',
+        local.class
+      )}
       {...rest}
     />
   )
@@ -154,7 +217,7 @@ export function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <KobalteDialog.Title
-      class={cn(headingVariants({ size: 'subsection', leading: 'none' }), local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/src/index.ts

@@ -89,6 +89,7 @@ export * from './components/layout/page'
 export * from './components/layout/panel'
 export * from './components/layout/side-rail'
 export * from './components/layout/sidebar-nav'
+export * from './components/layout/contextual-sidebar'
 export * from './components/layout/status-bar'
 export * from './components/layout/top-bar'
 

package/src/lib/overlay.ts

@@ -81,3 +81,17 @@ export const menuSeparator = 'bg-border -mx-1 my-1 h-px'
 
 /** Padding shared by every menu-list surface. */
 export const menuContentPadding = 'p-1'
+
+/**
+ * Marks a floating layer — a menu, a listbox, a popover — as part of the top
+ * layer.
+ *
+ * A modal dialog hides everything outside itself from assistive technology
+ * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.
+ * A menu or select opened from inside the dialog portals to `<body>`, so the
+ * dialog hid it too: the list was on screen, focused, and invisible to a
+ * screen reader, and an outside-click check could treat a click on it as a
+ * click away from the dialog. Kobalte exempts nodes carrying this attribute
+ * from both, so every floating layer carries it.
+ */
+export const topLayerProps = { 'data-kb-top-layer': '' } as const