@adea-ai/ui 0.106.2 → 0.107.0

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/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

package/src/styles/base.css

@@ -277,6 +277,19 @@
   text-orientation: mixed;
 }
 
+/**
+ * The docking box of an inset Sheet: below the top bar, with one gap (two spacing
+ * steps) from the top bar, the end edge and the bottom of the window, so the
+ * panel fills the height of the main view and its edges line up on every side.
+ * Narrow windows keep the same gap at the start edge too.
+ */
+@utility panel-dialog-inset {
+  top: calc(var(--topbar-height) + var(--spacing) * 2);
+  inset-inline-end: calc(var(--spacing) * 2);
+  bottom: calc(var(--spacing) * 2);
+  max-width: calc(100vw - var(--spacing) * 4);
+}
+
 @utility no-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;