@adea-ai/ui 0.106.1 → 0.107.0

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

@@ -205,6 +205,28 @@
 
 /* --- Named utilities ----------------------------------------------------- */
 
+/* Role utilities use fallbacks directly instead of @theme aliases. Tailwind
+   emits every @theme variable globally, while these rules are emitted only
+   when a consumer uses that role. The optional Appearance sheet supplies the
+   selected role variables when its root marker is present. */
+@utility font-content {
+  font-family: var(--font-content, var(--font-sans));
+}
+
+@utility font-code {
+  font-family: var(--font-code, var(--font-mono));
+}
+
+@utility text-content {
+  font-size: var(--text-content, var(--text-sm));
+  line-height: var(--tw-leading, var(--text-content--line-height, var(--text-sm--line-height)));
+}
+
+@utility text-code {
+  font-size: var(--text-code, 0.75rem);
+  line-height: var(--tw-leading, var(--text-code--line-height, 1.5));
+}
+
 /**
  * Visible to a screen reader, invisible on screen.
  *
@@ -255,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;

package/src/styles/theme.css

@@ -525,15 +525,6 @@
   --font-family-geist-mono: 'Geist Mono Variable', 'Geist Mono', monospace;
   --font-family-system: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-family-system-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
-  /* Lightweight role defaults keep conversation and code components useful for
-     consumers that have not opted into independent Appearance font settings. */
-  --font-content: var(--font-sans);
-  --font-code: var(--font-mono);
-  --text-content: var(--text-sm);
-  --text-content--line-height: var(--text-sm--line-height);
-  --text-code: 0.75rem;
-  --text-code--line-height: 1.5;
-
   /* Width compensation for the mono UI fonts. `normal` on the proportional face,
      tightened by the `[data-font]` blocks above when the UI font is monospace. */
   --ui-tracking: normal;
@@ -784,8 +775,6 @@
 
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
-  --font-content: var(--font-content);
-  --font-code: var(--font-code);
   --font-family-space-grotesk: var(--font-family-space-grotesk);
   --font-family-jetbrains-mono: var(--font-family-jetbrains-mono);
   --font-family-geist: var(--font-family-geist);
@@ -809,10 +798,6 @@
   --text-2xl--line-height: var(--text-2xl--line-height);
   --text-3xl: var(--text-3xl);
   --text-3xl--line-height: var(--text-3xl--line-height);
-  --text-content: var(--text-content);
-  --text-content--line-height: var(--text-content--line-height);
-  --text-code: var(--text-code);
-  --text-code--line-height: var(--text-code--line-height);
 
   --radius-sm: var(--radius-sm);
   --radius-md: var(--radius-md);