@adea-ai/ui 0.106.1 → 0.107.0

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

@@ -20,12 +20,12 @@ import { cn } from '../../../lib/utils'
  * needs a gap between them that is a layout concern, not punctuation.
  */
 export const kbdVariants = cva(
-  'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-code text-code font-medium select-none',
+  'bg-muted text-muted-foreground pointer-events-none inline-flex min-h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-code text-code font-medium select-none',
   {
     variants: {
       size: {
         default: '',
-        compact: 'h-4 min-w-4 bg-muted/40 px-0.5 font-normal leading-none',
+        compact: 'min-h-4 min-w-4 bg-muted/40 px-0.5 font-normal leading-none',
       },
     },
     defaultVariants: {

package/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.106.1",
+  "version": "0.107.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/registry.json

@@ -1918,7 +1918,7 @@
         "@adea-ai/ui/button",
         "@adea-ai/ui/dropdown-menu",
         "@adea-ai/ui/input",
-        "@adea-ai/ui/popover",
+        "@adea-ai/ui/sheet",
         "@adea-ai/ui/switch",
         "@adea-ai/ui/theme",
         "lib"

package/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -41,12 +41,15 @@ import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-se
 
 import { Switch } from '../../ui/switch/switch'
 import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTitle,
-  PopoverTrigger,
-} from '../../ui/popover/popover'
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../ui/sheet/sheet'
 import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'
 import { ModeChoices, AccentChoices, GlassChoices, isCustomAccent } from './appearance-choices'
 import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
@@ -61,7 +64,6 @@ import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
  */
 export function AppearanceEditor(props: AppearanceEditorProps) {
   const errorId = createUniqueId()
-  const saveReasonId = createUniqueId()
   const custom = () => isCustomAccent(props)
   const accentDescription = () => {
     if (props.draft.accent === 'theme') return "Theme default · Uses the palette's intended color."
@@ -188,15 +190,35 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           </Button>
         </SettingsRow>
       </div>
+      <Show when={!props.hideActions}>
+        {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
+            editor scrolls with its host panel, and actions parked at the bottom
+            of a long form were unreachable without scrolling past every row. */}
+        <div class="sticky bottom-0 z-10 mt-2 border-t bg-background px-4 py-3">
+          <AppearanceEditorActions {...props} />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * Reset, Cancel and Save, with the reason Save is unavailable. Rendered by the
+ * editor itself, or — with `hideActions` — by a host that pins them in its own
+ * footer, as `AppearancePopover` does.
+ */
+export function AppearanceEditorActions(props: AppearanceEditorProps) {
+  const saveReasonId = createUniqueId()
+  return (
+    <div class="flex w-full flex-col gap-2">
       <Show when={props.saveDisabledReason}>
-        <p id={saveReasonId} role="status" class="px-4 pt-3 text-xs text-muted-foreground">
+        <p id={saveReasonId} role="status" class="text-xs text-muted-foreground">
           {props.saveDisabledReason}
         </p>
       </Show>
-      {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
-          editor scrolls with its host panel, and actions parked at the bottom
-          of a long form were unreachable without scrolling past every row. */}
-      <div class="global-appearance-editor-actions sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3">
+      {/* `global-appearance-editor-actions` lets these buttons grow with the UI
+          font preference, like the rest of Appearance's own controls. */}
+      <div class="global-appearance-editor-actions flex flex-wrap items-center gap-2">
         <Button
           type="button"
           size="sm"
@@ -232,19 +254,15 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
   )
 }
 
-/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.
- * Its measured available height also bounds scrolling, keeping footer actions
- * reachable when a narrow popup begins below its trigger. */
+/** The editor in an inset Sheet docked beside the main view: the body scrolls and
+ * Reset/Cancel/Save sit in the panel's full-width footer, always reachable.
+ * Dismissal (Escape, the close button, an outside click) is `onDismiss`. */
 export function AppearancePopover(props: AppearancePopoverProps) {
   const [menuPortalMount, setMenuPortalMount] = createSignal<HTMLElement>()
 
   return (
-    <Popover
-      open={props.open}
-      modal
-      onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}
-    >
-      <PopoverTrigger
+    <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>
+      <SheetTrigger
         as={Button}
         type="button"
         variant="ghost"
@@ -252,17 +270,21 @@ export function AppearancePopover(props: AppearancePopoverProps) {
         aria-label="Appearance settings"
       >
         <Palette />
-      </PopoverTrigger>
-      <PopoverContent
-        ref={setMenuPortalMount}
-        class="w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto"
-      >
-        <PopoverTitle>Appearance</PopoverTitle>
-        <PopoverDescription>
-          Changes preview immediately. Save keeps them; Cancel restores the previous appearance.
-        </PopoverDescription>
-        <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} />
-      </PopoverContent>
-    </Popover>
+      </SheetTrigger>
+      <SheetContent side="end" closeLabel="Close appearance settings" ref={setMenuPortalMount}>
+        <SheetHeader>
+          <SheetTitle>Appearance</SheetTitle>
+          <SheetDescription>
+            Changes preview immediately. Save keeps them; Cancel restores the previous appearance.
+          </SheetDescription>
+        </SheetHeader>
+        <SheetBody>
+          <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} hideActions />
+        </SheetBody>
+        <SheetFooter>
+          <AppearanceEditorActions {...props} />
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   )
 }

package/src/components/composites/appearance-editor/appearance-types.ts

@@ -55,6 +55,8 @@ export type AppearanceEditorProps = {
   /** Mount nested font menus inside the containing overlay when one exists. */
   menuPortalMount?: HTMLElement
   class?: string
+  /** Leave Reset/Cancel/Save to the host, which renders `AppearanceEditorActions`. */
+  hideActions?: boolean
 }
 
 export type AppearancePopoverProps = AppearanceEditorProps & {

package/src/components/composites/appearance-editor/index.ts

@@ -1,4 +1,4 @@
-export { AppearanceEditor, AppearancePopover } from './appearance-editor'
+export { AppearanceEditor, AppearanceEditorActions, AppearancePopover } from './appearance-editor'
 export {
   AppearanceFontSettingsGroup,
   type AppearanceFontSettingsGroupProps,

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/kbd/kbd.tsx

@@ -20,12 +20,12 @@ import { cn } from '#lib/utils'
  * needs a gap between them that is a layout concern, not punctuation.
  */
 export const kbdVariants = cva(
-  'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-code text-code font-medium select-none',
+  'bg-muted text-muted-foreground pointer-events-none inline-flex min-h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-code text-code font-medium select-none',
   {
     variants: {
       size: {
         default: '',
-        compact: 'h-4 min-w-4 bg-muted/40 px-0.5 font-normal leading-none',
+        compact: 'min-h-4 min-w-4 bg-muted/40 px-0.5 font-normal leading-none',
       },
     },
     defaultVariants: {