@adea-ai/ui 0.105.0 → 0.106.1

package/dist/r/src/components/theme/appearance-panel.tsx

@@ -1,9 +1,12 @@
 import type { ComponentProps } from 'solid-js'
-import { For, Show, splitProps } from 'solid-js'
-import { accentPresets, fontOptions } from '../../lib/tokens'
+import { Show, splitProps } from 'solid-js'
+import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import { accentPresets } from '../../lib/tokens'
 import { themesForAppearance } from '../../lib/themes'
+import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '../../lib/appearance-font-settings'
 import { cn } from '../../lib/utils'
-import { Button } from '../ui/button/button'
+import { AccentSwatchGroups } from '../composites/appearance-editor/accent-swatch-groups'
+import { AppearanceFontSettingsGroup } from '../composites/appearance-editor/font-settings-group'
 import { RadioGroup, RadioGroupItem } from '../ui/radio-group/radio-group'
 import { ThemePicker } from './theme-picker'
 import { useTheme } from './theme-provider'
@@ -26,7 +29,7 @@ import { Heading } from '../ui/typography'
  *      setting that keeps changing.
  *   3. **Accent** — adea's presets, then the accents the selected theme pair
  *      carries itself, layered on whichever theme is active.
- *   4. **Font** — the interface face.
+ *   4. **Fonts** — separate families and sizes for interface, content and code.
  *
  * The panel reads and writes the provider's preference and keeps no state of its
  * own, so it cannot disagree with what is applied.
@@ -39,6 +42,11 @@ const DARK_THEMES = themesForAppearance('dark')
 export function AppearancePanel(props: AppearancePanelProps) {
   const [local, rest] = splitProps(props, ['class'])
   const { selection, setSelection, resolvedAppearance, themeAccents } = useTheme()
+  const selectedAccent = () =>
+    accentPresets.some((option) => option.id === selection().accent) ||
+    themeAccents().some((option) => option.id === selection().accent)
+      ? selection().accent
+      : 'theme'
 
   return (
     <div data-slot="appearance-panel" class={cn('flex flex-col gap-8', local.class)} {...rest}>
@@ -101,99 +109,42 @@ export function AppearancePanel(props: AppearancePanelProps) {
             unreadable.
           </p>
         </header>
-        <div role="radiogroup" aria-label="Accent" class="flex flex-wrap gap-2">
-          <For each={accentPresets}>
-            {(preset) => (
-              <AccentOption
-                id={preset.id}
-                label={preset.label}
-                checked={selection().accent === preset.id}
-                swatch={
-                  preset.id === 'theme'
-                    ? 'var(--primary)'
-                    : `var(--accent-${preset.id}, ${preset.dark})`
-                }
-                onSelect={() => setSelection({ accent: preset.id })}
-              />
-            )}
-          </For>
-          {/* The theme's own accents follow the presets. Their values are the
-              theme pair's, so the swatch shows the side that is active now. */}
-          <For each={themeAccents()}>
-            {(accent) => (
-              <AccentOption
-                id={accent.id}
-                label={`Theme ${accent.label.toLowerCase()}`}
-                checked={selection().accent === accent.id}
-                swatch={resolvedAppearance() === 'dark' ? accent.dark : accent.light}
-                onSelect={() => setSelection({ accent: accent.id })}
-              />
-            )}
-          </For>
-        </div>
+        <Radio
+          value={selectedAccent()}
+          onChange={(accent) => setSelection({ accent })}
+          orientation="horizontal"
+          aria-label="Accent"
+          class="flex flex-col items-start gap-3"
+        >
+          <AccentSwatchGroups
+            accentOptions={accentPresets}
+            themeAccentOptions={themeAccents()}
+            resolvedAppearance={resolvedAppearance()}
+            themeDefaultColor="var(--primary)"
+          />
+        </Radio>
       </section>
 
-      {/* --- 4. Font -------------------------------------------------------- */}
+      {/* --- 4. Fonts ------------------------------------------------------- */}
       <section class="flex flex-col gap-3">
         <header class="flex flex-col gap-0.5">
           <Heading as="h2" size="card">
-            Typeface
+            Fonts
           </Heading>
           <p class="max-w-prose text-sm text-muted-foreground">
-            The interface face. Every option is self-hosted, so nothing is fetched at runtime and
-            the choice survives going offline.
+            Choose separate families and sizes for the interface, reading, and code. Font families
+            come from the shared catalogue and are self-hosted.
           </p>
         </header>
-        <RadioGroup
-          value={selection().font}
-          onChange={(value) => setSelection({ font: value as string })}
-          aria-label="Typeface"
-        >
-          <For each={fontOptions}>
-            {(option) => (
-              <RadioGroupItem
-                value={option.id}
-                label={option.label}
-                description={option.description}
-              />
-            )}
-          </For>
-        </RadioGroup>
+        <AppearanceFontSettingsGroup
+          settings={selection().fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}
+          onChange={(fonts) => setSelection({ fonts })}
+        />
       </section>
     </div>
   )
 }
 
-function AccentOption(props: {
-  id: string
-  label: string
-  checked: boolean
-  swatch: string
-  onSelect: () => void
-}) {
-  return (
-    <Button
-      as="button"
-      type="button"
-      variant="outline"
-      size="sm"
-      role="radio"
-      data-accent-option={props.id}
-      aria-checked={props.checked}
-      aria-label={props.label}
-      class={cn({ 'border-ring ring-3 ring-primary-subtle': props.checked })}
-      onClick={() => props.onSelect()}
-    >
-      <span
-        aria-hidden="true"
-        class="size-3 rounded-full border border-border"
-        style={{ 'background-color': props.swatch }}
-      />
-      {props.label}
-    </Button>
-  )
-}
-
 function ThemeSection(props: {
   title: string
   description: string

package/dist/r/src/components/theme/theme-provider.tsx

@@ -8,7 +8,15 @@ import {
   splitProps,
   useContext,
 } from 'solid-js'
-import { accentPresets, fontOptions } from '../../lib/tokens'
+import { accentPresets } from '../../lib/tokens'
+import { safeScriptStringLiteral } from '../../lib/safe-script'
+import {
+  applyAppearanceFontSettings,
+  DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
+  fontSettingsBootstrapScript,
+  normalizeAppearanceEditorFontSettings,
+  type AppearanceEditorFontSettings,
+} from '../../lib/appearance-font-settings'
 import type { AccentPreset } from '@adea-ai/themes'
 import {
   accentVariables,
@@ -39,7 +47,7 @@ import {
  *   - **an accent** — adea's six presets, or one of the accents the selected theme
  *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on
  *     top of whichever theme is active.
- *   - **a font** — the interface face.
+ *   - **fonts** — separate family and size choices for UI, content and code.
  *
  * Four axes rather than one list of presets, because they compose: a user who wants
  * Nord with a violet accent and the system font should not need someone to author
@@ -67,8 +75,10 @@ export type ThemeSelection = {
    * not offer falls back to the variant's own primary.
    */
   accent: string
-  /** A `fontOptions` id, or `space-grotesk` for the default. */
+  /** UI-family alias for consumers of the original single-font preference. */
   font: string
+  /** UI, content and code font settings. Omitted legacy records are migrated from `font`. */
+  fonts?: AppearanceEditorFontSettings
   /**
    * `comfortable` is the system's default geometry; `compact` moves the control
    * ladder down one rung.
@@ -84,7 +94,8 @@ export const defaultThemeSelection: ThemeSelection = {
   lightThemeId: defaultLightThemeId,
   darkThemeId: defaultDarkThemeId,
   accent: 'theme',
-  font: 'space-grotesk',
+  font: 'system',
+  fonts: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
   density: 'comfortable',
 }
 
@@ -153,6 +164,7 @@ function readSelection(storageKey: string): ThemeSelection {
     const raw = preferenceStore()?.getItem(storageKey)
     if (!raw) return defaultThemeSelection
     const parsed = JSON.parse(raw) as Partial<ThemeSelection>
+    const fonts = normalizeAppearanceEditorFontSettings(parsed.fonts, parsed.font).settings
     return {
       appearance:
         parsed.appearance === 'light' ||
@@ -179,9 +191,8 @@ function readSelection(storageKey: string): ThemeSelection {
           isThemeAccentId(parsed.accent))
           ? parsed.accent
           : defaultThemeSelection.accent,
-      font: fontOptions.some((option) => option.id === parsed.font)
-        ? (parsed.font as string)
-        : defaultThemeSelection.font,
+      font: fonts.ui.family,
+      fonts,
       // Every axis has to be read back here, or it is lost twice: the effect below
       // removes the `data-density` that `themeScript` set for the first paint, and
       // the next `setSelection` rewrites the store without it.
@@ -192,6 +203,26 @@ function readSelection(storageKey: string): ThemeSelection {
   }
 }
 
+/** Keep the deprecated single-font view synchronized with the UI axis. */
+function mergeThemeSelection(base: ThemeSelection, patch: Partial<ThemeSelection>): ThemeSelection {
+  const merged = { ...base, ...patch }
+  let fonts: AppearanceEditorFontSettings
+
+  if (patch.fonts !== undefined) {
+    fonts = normalizeAppearanceEditorFontSettings(patch.fonts).settings
+  } else if (patch.font !== undefined) {
+    const currentFonts = normalizeAppearanceEditorFontSettings(base.fonts, base.font).settings
+    fonts = normalizeAppearanceEditorFontSettings({
+      ...currentFonts,
+      ui: { ...currentFonts.ui, family: patch.font },
+    }).settings
+  } else {
+    fonts = normalizeAppearanceEditorFontSettings(merged.fonts, merged.font).settings
+  }
+
+  return { ...merged, fonts, font: fonts.ui.family }
+}
+
 export type ThemeProviderProps = {
   children?: JSX.Element
   /** Where the preference is persisted. Distinct per application. */
@@ -217,10 +248,9 @@ export function ThemeProvider(props: ThemeProviderProps) {
   const [local] = splitProps(props, ['children', 'storageKey', 'initial', 'selection'])
   const storageKey = () => local.storageKey ?? 'adea-appearance'
 
-  const [selection, setSelectionState] = createSignal<ThemeSelection>({
-    ...readSelection(storageKey()),
-    ...local.initial,
-  })
+  const [selection, setSelectionState] = createSignal<ThemeSelection>(
+    mergeThemeSelection(readSelection(storageKey()), local.initial ?? {})
+  )
 
   // The controlled half of the contract. A patch from the owner replaces the
   // matching axes; the stored preference is untouched, since the owner is the one
@@ -228,7 +258,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
   // value — is what keeps this subscribed for the provider's lifetime.
   createEffect(() => {
     const incoming = local.selection
-    if (incoming) setSelectionState((current) => ({ ...current, ...incoming }))
+    if (incoming) setSelectionState((current) => mergeThemeSelection(current, incoming))
   })
 
   const [systemAppearance, setSystemAppearance] = createSignal<ThemeAppearance>('light')
@@ -284,8 +314,10 @@ export function ThemeProvider(props: ThemeProviderProps) {
     if (!accent) root.removeAttribute('data-accent')
     else root.dataset['accent'] = selection().accent
 
-    if (selection().font === 'space-grotesk') root.removeAttribute('data-font')
-    else root.dataset['font'] = selection().font
+    applyAppearanceFontSettings(
+      root,
+      normalizeAppearanceEditorFontSettings(selection().fonts, selection().font).settings
+    )
 
     // Density is a pure token shift, so unlike the colour axes there is nothing to
     // compute: the attribute selects a block in `theme.css`. It is applied here for
@@ -306,7 +338,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
     themes: builtinThemes,
     themeAccents,
     setSelection(patch) {
-      const next = { ...selection(), ...patch }
+      const next = mergeThemeSelection(selection(), patch)
       setSelectionState(next)
       try {
         preferenceStore()?.setItem(storageKey(), JSON.stringify(next))
@@ -339,10 +371,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
  * was found; `tests/theme-script.test.ts` pins it so it cannot come back.
  */
 export function inlineScriptLiteral(value: string): string {
-  return JSON.stringify(value).replace(
-    /[<>\u2028\u2029]/g,
-    (character) => `\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`
-  )
+  return safeScriptStringLiteral(value)
 }
 
 /**
@@ -365,5 +394,6 @@ export function inlineScriptLiteral(value: string): string {
  * documented there.
  */
 export function themeScript(storageKey = 'adea-appearance'): string {
-  return `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.font&&p.font!=='space-grotesk')r.dataset.font=p.font;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`
+  const script = `(function(){try{var s=localStorage.getItem(${inlineScriptLiteral(storageKey)});var p=s?JSON.parse(s):{};var a=p.appearance||'system';var d=a==='dark'||(a==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;if(d)r.classList.add('dark');r.style.colorScheme=d?'dark':'light';if(p.accent&&p.accent!=='theme')r.dataset.accent=p.accent;if(p.density==='compact')r.dataset.density='compact';}catch(e){}})();`
+  return `${script}${fontSettingsBootstrapScript(storageKey)}`
 }

package/dist/r/src/components/ui/code-block/code-block.tsx

@@ -156,7 +156,7 @@ export function CodeBlock(props: CodeBlockProps) {
       }}
     >
       <div class="flex items-center justify-between gap-2 px-3 py-1">
-        <span class="truncate font-mono text-xs text-muted-foreground">{label()}</span>
+        <span class="truncate font-code text-code text-muted-foreground">{label()}</span>
         <Actions />
       </div>
       <div
@@ -170,7 +170,7 @@ export function CodeBlock(props: CodeBlockProps) {
           when={local.highlight}
           fallback={
             <pre class="m-0 px-3 py-2" style={{ 'line-height': local.lineHeight ?? '1.5' }}>
-              <code class="font-mono text-xs">
+              <code class="font-code text-code">
                 <Show when={local.showLineNumbers} fallback={local.code.replace(/\n$/, '')}>
                   <For each={lines()}>
                     {(line, index) => (
@@ -217,9 +217,9 @@ export function CodeBlock(props: CodeBlockProps) {
  * InlineCode.
  *
  * The `code` inside a sentence. It is a component rather than a class because it
- * has to hold three properties at once: it must not break the line's rhythm
- * (`font-size: 0.9em`, so it tracks the surrounding text), it must wrap rather
- * than overflow a narrow column (`overflow-wrap: anywhere` — an identifier with
+ * has to hold three properties at once: it uses the shared code family and size
+ * preference, and it wraps rather than overflows a narrow column
+ * (`overflow-wrap: anywhere` — an identifier with
  * no spaces is one long token), and it must be legible against whatever surface
  * it lands on, which is why the fill is a token and not a fixed grey.
  */
@@ -229,7 +229,7 @@ export function InlineCode(props: ComponentProps<'code'>) {
   return (
     <code
       class={cn(
-        'rounded-sm bg-muted px-[0.4em] py-[0.15em] font-mono text-[0.9em] text-foreground [overflow-wrap:anywhere]',
+        'rounded-sm bg-muted px-[0.4em] py-[0.15em] font-code text-code text-foreground [overflow-wrap:anywhere]',
         local.class
       )}
       {...rest}

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

@@ -274,7 +274,7 @@ export function CommandShortcut(props: {
   return (
     <span
       class={cn(
-        'text-muted-foreground ms-auto font-mono text-2xs tracking-widest group-data-[selected=true]/command-item:text-foreground',
+        'text-muted-foreground ms-auto font-code text-code tracking-widest group-data-[selected=true]/command-item:text-foreground',
         props.class
       )}
     >

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

@@ -90,7 +90,7 @@ export function ContextMenuItem(
       {local.shortcut ? (
         <span
           aria-hidden="true"
-          class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest"
+          class="text-muted-foreground ms-auto font-code text-code tracking-widest"
         >
           {local.shortcut}
         </span>

package/dist/r/src/components/ui/diff-block/diff-block.tsx

@@ -152,7 +152,7 @@ export function diffTargetPath(patch: string): string | null {
   return null
 }
 
-export const diffLineVariants = cva('flex items-baseline font-mono text-xs', {
+export const diffLineVariants = cva('flex items-baseline font-code text-code', {
   variants: {
     kind: {
       add: 'bg-success-subtle text-foreground',
@@ -201,10 +201,10 @@ export function DiffBlock(props: DiffBlockProps) {
     >
       <div class="flex items-center justify-between gap-2 border-b border-border px-3 py-1">
         <span class="flex min-w-0 items-baseline gap-2">
-          <span class="truncate font-mono text-xs text-foreground">{name()}</span>
+          <span class="truncate font-code text-code text-foreground">{name()}</span>
           {/* The counts are text, so the summary survives greyscale and a reader
               who cannot separate the two line tones still gets the shape of it. */}
-          <span class="shrink-0 font-mono text-2xs text-muted-foreground">
+          <span class="shrink-0 font-code text-code text-muted-foreground">
             <span class="text-foreground">+{stats().added}</span>{' '}
             <span class="text-foreground">−{stats().removed}</span>
           </span>
@@ -223,13 +223,13 @@ export function DiffBlock(props: DiffBlockProps) {
               <div class={diffLineVariants({ kind: line.kind })}>
                 <Show when={numbered(line, local.showLineNumbers)}>
                   <span
-                    class="w-10 shrink-0 pr-2 text-right text-2xs text-muted-foreground tabular-nums select-none"
+                    class="w-10 shrink-0 pr-2 text-right text-code text-muted-foreground tabular-nums select-none"
                     aria-hidden="true"
                   >
                     {line.oldLine ?? ''}
                   </span>
                   <span
-                    class="w-10 shrink-0 pr-2 text-right text-2xs text-muted-foreground tabular-nums select-none"
+                    class="w-10 shrink-0 pr-2 text-right text-code text-muted-foreground tabular-nums select-none"
                     aria-hidden="true"
                   >
                     {line.newLine ?? ''}
@@ -271,13 +271,13 @@ export function DiffSummary(props: { patch: string; class?: string; onSelect?: (
     <button
       type="button"
       class={cn(
-        'flex w-full items-baseline justify-between gap-3 rounded-md px-2 py-1 text-left font-mono text-xs hover:bg-muted',
+        'flex w-full items-baseline justify-between gap-3 rounded-md px-2 py-1 text-left font-code text-code hover:bg-muted',
         props.class
       )}
       onClick={() => props.onSelect?.()}
     >
       <span class="truncate text-foreground">{name()}</span>
-      <span class="shrink-0 text-2xs">
+      <span class="shrink-0 text-code">
         <span class="text-foreground">+{stats().added}</span>{' '}
         <span class="text-foreground">−{stats().removed}</span>
       </span>

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

@@ -1,7 +1,7 @@
 import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'
 import { Check, ChevronRight, Circle } from 'lucide-solid'
-import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import type { Accessor, ComponentProps } from 'solid-js'
+import { createContext, splitProps, useContext } from 'solid-js'
 import {
   menuContentPadding,
   destructiveMenuItem,
@@ -14,6 +14,18 @@ import {
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
+type MenuOrientation = 'horizontal' | 'vertical'
+const DropdownMenuOrientationContext = createContext<Accessor<MenuOrientation | undefined>>()
+type HandlerEvent<Handler> = Handler extends (...args: infer Arguments) => void
+  ? Arguments[0]
+  : never
+type DropdownMenuTriggerKeyEvent = HandlerEvent<
+  NonNullable<ComponentProps<typeof KobalteDropdownMenu.Trigger>['onKeyDown']>
+>
+type DropdownMenuTriggerPointerEvent = HandlerEvent<
+  NonNullable<ComponentProps<typeof KobalteDropdownMenu.Trigger>['onPointerDown']>
+>
+
 /**
  * DropdownMenu.
  *
@@ -34,12 +46,138 @@ import { cn } from '../../../lib/utils'
  * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
-  const [local, rest] = splitProps(props, ['modal'])
-  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />
+  const [local, rest] = splitProps(props, ['modal', 'orientation'])
+  const orientation = () => local.orientation
+  return (
+    <DropdownMenuOrientationContext.Provider value={orientation}>
+      <KobalteDropdownMenu modal={local.modal ?? false} orientation={local.orientation} {...rest} />
+    </DropdownMenuOrientationContext.Provider>
+  )
+}
+
+const SCROLLABLE_OVERFLOW = /(auto|scroll)/
+const OVERFLOW_PROPERTIES = ['overflow', 'overflow-x', 'overflow-y'] as const
+
+type OverflowProperty = (typeof OVERFLOW_PROPERTIES)[number]
+type OverflowDeclaration = Readonly<{
+  property: OverflowProperty
+  value: string
+  priority: string
+}>
+
+function readInlineOverflow(element: HTMLElement): OverflowDeclaration[] {
+  return OVERFLOW_PROPERTIES.map((property) => ({
+    property,
+    value: element.style.getPropertyValue(property),
+    priority: element.style.getPropertyPriority(property),
+  }))
+}
+
+function declarationsMatch(element: HTMLElement, declarations: OverflowDeclaration[]) {
+  return declarations.every(
+    ({ property, value, priority }) =>
+      element.style.getPropertyValue(property) === value &&
+      element.style.getPropertyPriority(property) === priority
+  )
+}
+
+function bypassUnboundedScrollLookup(trigger: HTMLElement) {
+  const scrollRoot = document.scrollingElement ?? document.documentElement
+  if (window.getComputedStyle(scrollRoot).overflow !== 'hidden') return
+
+  const temporaryStyles: Array<{
+    element: HTMLElement
+    original: OverflowDeclaration[]
+    applied: OverflowDeclaration[]
+  }> = []
+
+  for (let element: HTMLElement | null = trigger; element;) {
+    const parent: HTMLElement | null = element.parentElement
+    if (element !== scrollRoot) {
+      const computed = window.getComputedStyle(element)
+      const overflow = `${computed.overflow} ${computed.overflowX} ${computed.overflowY}`
+      if (SCROLLABLE_OVERFLOW.test(overflow)) {
+        const original = readInlineOverflow(element)
+        element.style.setProperty('overflow', 'clip', 'important')
+        temporaryStyles.push({ element, original, applied: readInlineOverflow(element) })
+      }
+    }
+    element = parent
+  }
+
+  if (temporaryStyles.length === 0) return
+
+  // Kobalte's keyboard path synchronously walks scroll parents before it opens
+  // the menu. Clipping only non-root scroll ancestors makes that walk stop at
+  // the locked viewport. Restore those declarations once the event handler
+  // finishes, and leave any newer owner write untouched.
+  queueMicrotask(() => {
+    for (const { element, original, applied } of temporaryStyles) {
+      if (!element.isConnected || !declarationsMatch(element, applied)) continue
+      for (const property of OVERFLOW_PROPERTIES) element.style.removeProperty(property)
+      for (const { property, value, priority } of original) {
+        if (value) element.style.setProperty(property, value, priority)
+      }
+    }
+  })
 }
 
 export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {
-  return <KobalteDropdownMenu.Trigger {...props} />
+  const inheritedOrientation = useContext(DropdownMenuOrientationContext)
+  const [local, rest] = splitProps(props, ['disabled', 'onKeyDown', 'onPointerDown'])
+  const onPointerDown = (event: DropdownMenuTriggerPointerEvent) => {
+    if (typeof local.onPointerDown === 'function') local.onPointerDown(event)
+    else if (local.onPointerDown) local.onPointerDown[0](local.onPointerDown[1], event)
+
+    // WebKit can leave focus on a previous control when a native button gets
+    // a pointer click. Focus the trigger before Kobalte opens the menu so an
+    // enclosing modal focus scope does not restore focus and dismiss the menu.
+    if (
+      local.disabled ||
+      event.defaultPrevented ||
+      !event.isPrimary ||
+      event.button !== 0 ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey
+    ) {
+      return
+    }
+    const trigger = event.currentTarget
+    const isNativeLink = trigger instanceof HTMLAnchorElement && trigger.hasAttribute('href')
+    if (trigger instanceof HTMLElement && !isNativeLink) {
+      trigger.focus({ preventScroll: true })
+    }
+  }
+  const onKeyDown = (event: DropdownMenuTriggerKeyEvent) => {
+    // Kobalte's MenuTrigger does not consult defaultPrevented before its own
+    // open-key handling. Preserve its existing callback behavior; this wrapper
+    // only makes the pre-open scroll-parent lookup terminate.
+    if (typeof local.onKeyDown === 'function') local.onKeyDown(event)
+    else if (local.onKeyDown) local.onKeyDown[0](local.onKeyDown[1], event)
+
+    if (local.disabled) return
+    const trigger = event.currentTarget
+    if (!(trigger instanceof HTMLElement)) return
+    const menubarOrientation = trigger.closest('[role="menubar"]')?.getAttribute('aria-orientation')
+    const orientation =
+      inheritedOrientation?.() ?? (menubarOrientation === 'vertical' ? 'vertical' : 'horizontal')
+    const openingArrow = orientation === 'horizontal' ? 'ArrowDown' : 'ArrowRight'
+    if (!['Enter', ' ', openingArrow].includes(event.key)) return
+    const isNativeLink = trigger instanceof HTMLAnchorElement && trigger.hasAttribute('href')
+    if (isNativeLink && (event.key === 'Enter' || event.key === ' ')) return
+    bypassUnboundedScrollLookup(trigger)
+  }
+
+  return (
+    <KobalteDropdownMenu.Trigger
+      {...rest}
+      disabled={local.disabled}
+      onPointerDown={onPointerDown}
+      onKeyDown={onKeyDown}
+    />
+  )
 }
 
 export function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {
@@ -113,7 +251,7 @@ export function DropdownMenuItem(
       {local.shortcut ? (
         <span
           aria-hidden="true"
-          class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest"
+          class="text-muted-foreground ms-auto font-code text-code tracking-widest"
         >
           {local.shortcut}
         </span>
@@ -139,7 +277,7 @@ export function DropdownMenuShortcut(props: ComponentProps<'span'>) {
     <span
       data-slot="dropdown-menu-shortcut"
       aria-hidden="true"
-      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}
+      class={cn('text-muted-foreground ms-auto font-code text-code tracking-widest', local.class)}
       {...rest}
     />
   )

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

@@ -20,7 +20,7 @@ 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-mono text-2xs font-medium select-none',
+  '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',
   {
     variants: {
       size: {

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

@@ -123,7 +123,7 @@ export function MenubarItem(
       {local.shortcut ? (
         <span
           aria-hidden="true"
-          class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest"
+          class="text-muted-foreground ms-auto font-code text-code tracking-widest"
         >
           {local.shortcut}
         </span>