frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/tailwind/plugin.js

@@ -3,12 +3,158 @@ import {
   generateColorPalette,
   generateSemanticColors,
   generateCSSVariables,
+  generateEffectVariables,
 } from './colorPalette.js'
-import { borderRadius, boxShadow, fontSize } from './tokens.js'
+import radiusTokens from './generated/radius.json'
+import typographyTokens from './generated/typography.json'
+import effectsData from './generated/effects.json'
 
 let colorPalette = generateColorPalette()
 let semanticColors = generateSemanticColors()
-let cssVariables = generateCSSVariables()
+let cssVariables = mergeVariableLayers(
+  generateCSSVariables(),
+  generateEffectVariables(),
+  generateRadiusVariables(),
+)
+
+// Emit `--radius-{key}` for every radius token (numeric scale + aliases) so
+// the values are inspectable as real CSS variables. `borderRadius` is rewired
+// below to consume these vars, so `rounded-4` and `--radius-4` stay in sync.
+function generateRadiusVariables() {
+  const vars = {}
+  for (const [key, value] of Object.entries(radiusTokens)) {
+    if (key === 'DEFAULT') continue
+    vars[`--radius-${key}`] = value
+  }
+  return { ':root': vars }
+}
+
+// Map `DEFAULT` (Tailwind's `rounded` class) onto the numeric var that
+// shares its value, so we don't emit a `--radius-DEFAULT` (awkward name).
+// Each value carries a trailing `/* {px} */` comment so editor tooling
+// (Tailwind IntelliSense) surfaces the resolved px on hover, instead of
+// the opaque `var(--radius-*)` reference.
+function buildRadiusConfig() {
+  const numericByValue = {}
+  for (const [key, value] of Object.entries(radiusTokens)) {
+    if (/^\d+$/.test(key)) numericByValue[value] = key
+  }
+  const out = {}
+  for (const [key, value] of Object.entries(radiusTokens)) {
+    if (key === 'DEFAULT') {
+      const numeric = numericByValue[value]
+      out[key] = numeric ? `var(--radius-${numeric}) /* ${value} */` : value
+    } else {
+      out[key] = `var(--radius-${key}) /* ${value} */`
+    }
+  }
+  return out
+}
+
+// Merge two `{ selector: { var: value } }` objects into one, preserving any
+// vars already declared under the same selector.
+function mergeVariableLayers(...layers) {
+  const out = {}
+  for (const layer of layers) {
+    for (const [selector, vars] of Object.entries(layer)) {
+      out[selector] = { ...(out[selector] || {}), ...vars }
+    }
+  }
+  return out
+}
+
+// Weight variants are exposed as component classes — `text-<size>-<weight>` and
+// the paragraph counterpart `text-p-<size>-<weight>` — one per Figma named
+// style. Figma tracks each weight differently per size and CSS letter-spacing
+// can't follow font-weight, so each (size, weight) must ship as a self-contained
+// class. `regular` stays the bare `text-<size>` / `text-p-<size>` utility.
+// (Component classes are JIT-purged, so only the ones used in content emit.)
+const WEIGHT_VARIANTS = ['medium', 'semibold', 'bold', 'black']
+
+function buildFontSize() {
+  const out = {}
+  // Each size's regular variant already carries lineHeight, letterSpacing and
+  // fontWeight from the text-styles export (see figma-tokens-to-theme.js).
+  for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
+    out[key] = [size, { ...meta }]
+  }
+  // Paragraph variants (`text-p-<size>`): same size, the paragraph style's
+  // looser line-height and its own letter-spacing.
+  for (const [key, p] of Object.entries(typographyTokens.paragraph || {})) {
+    if (!out[key]) continue
+    const [size, meta] = out[key]
+    out[`p-${key}`] = [
+      size,
+      { ...meta, lineHeight: p.lineHeight, letterSpacing: p.letterSpacing },
+    ]
+  }
+  return out
+}
+
+// Focus ring utilities backed by `--focus-outline-*` CSS vars (theme-flipped
+// in colorPalette.js#generateEffectVariables). Implemented as `outline`, not
+// box-shadow, so rings never collide with shadow/ring utilities on the same
+// element and survive forced-colors mode. The default ring is applied
+// globally via `:focus-visible` (see globalStyles); these utilities are for
+// themed overrides (`focus-visible:focus-ring-red`) and non-focus states
+// (`data-[state=open]:focus-ring`). Registered via `addComponents` so
+// Tailwind IntelliSense picks them up.
+function buildFocusRingUtilities() {
+  const out = {}
+  for (const name of Object.keys(effectsData.focus.light)) {
+    const className = name === 'default' ? '.focus-ring' : `.focus-ring-${name}`
+    out[className] = {
+      outline: `var(--focus-outline-${name})`,
+      outlineOffset: '0px',
+    }
+  }
+  return out
+}
+
+function buildTextStyleUtilities() {
+  const out = {}
+  const t = typographyTokens
+  const groups = [
+    {
+      className: (s, w) => `.text-${s}-${w}`,
+      tracking: t.tracking?.text || {},
+      lineHeight: (s) => t.fontSize[s]?.[1].lineHeight,
+    },
+    {
+      className: (s, w) => `.text-p-${s}-${w}`,
+      tracking: t.tracking?.paragraph || {},
+      lineHeight: (s) => t.paragraph?.[s]?.lineHeight,
+    },
+  ]
+  for (const group of groups) {
+    for (const [size, byWeight] of Object.entries(group.tracking)) {
+      const entry = t.fontSize[size]
+      if (!entry) continue
+      const [fontSize] = entry
+      const lineHeight = group.lineHeight(size)
+      const transform = t.textTransform?.[size]
+      for (const weight of WEIGHT_VARIANTS) {
+        if (!(weight in byWeight)) continue
+        out[group.className(size, weight)] = {
+          fontSize,
+          lineHeight,
+          fontWeight: String(t.fontWeight[weight]),
+          letterSpacing: byWeight[weight],
+          ...(transform ? { textTransform: transform } : {}),
+        }
+      }
+    }
+  }
+  // `tiny` is an uppercase eyebrow style; the bare regular utility needs the
+  // text-transform too (Tailwind's fontSize tuple can't express it).
+  for (const [size, transform] of Object.entries(t.textTransform || {})) {
+    out[`.text-${size}`] = {
+      ...(out[`.text-${size}`] || {}),
+      textTransform: transform,
+    }
+  }
+  return out
+}
 
 let globalStyles = (theme) => ({
   html: {
@@ -26,41 +172,81 @@ let globalStyles = (theme) => ({
     backgroundSize: '1.13em',
     backgroundPosition: 'right 0.44rem center',
   },
+  // A bare `<p>` reads as body copy, so it defaults to a relaxed line-height
+  // instead of the tight value baked into the `text-<size>` utilities. Kept at
+  // element specificity (0,0,1) with `:where()` (which adds none) so any explicit
+  // `text-*` / `text-p-*` line-height wins, and scoped out of rich text so the
+  // `prose` / editor line-heights are untouched.
+  'p:not(:where(.prose, .ProseMirror) *)': {
+    lineHeight: '1.5',
+  },
+  // Global keyboard focus indicator (espresso v2 focus/default token).
+  // Lives in the base layer so any utility on the element can override it:
+  // suppress with `focus-visible:outline-none`, retheme with
+  // `focus-visible:focus-ring-<color>`.
+  ':focus-visible': {
+    outline: 'var(--focus-outline-default)',
+    outlineOffset: '0px',
+  },
 })
 
 let componentStyles = {
   '.form-input, .form-textarea, .form-select': {
-    '@apply h-7 rounded border border-[--surface-gray-2] bg-surface-gray-2 py-1.5 pl-2 pr-2 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3':
+    '@apply h-7 rounded border border-[--surface-gray-2] bg-surface-gray-2 py-1.5 pl-2 pr-2 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-base focus:shadow-sm focus:ring-0':
       {},
   },
   '.form-checkbox': {
-    '@apply rounded-md bg-surface-gray-2 text-ink-blue-2 focus:ring-0 focus-visible:ring-1':
-      {},
+    '@apply rounded-md bg-surface-gray-2 text-ink-blue-5 focus:ring-0': {},
   },
   "[data-theme='dark'] [type='checkbox']:checked": {
     'background-image': `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230F0F0F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`,
   },
-  "[data-theme='dark'] img": {
-    filter: 'brightness(.8) contrast(1.2)',
-  },
 }
 
 export default plugin(
-  function ({ addBase, addComponents, theme }) {
+  function ({ addBase, addComponents, matchUtilities, theme }) {
     addBase({ ...globalStyles(theme), ...cssVariables })
     addComponents(componentStyles)
+    addComponents(buildTextStyleUtilities())
+    addComponents(buildFocusRingUtilities())
+    // Authoring sugar for the list-family styling hooks (frappe-ui/list),
+    // on the spacing scale with variants and arbitrary values:
+    // `max-sm:list-gap-3` instead of `max-sm:[--list-gap:0.75rem]`.
+    matchUtilities(
+      {
+        'list-gap': (value) => ({ '--list-gap': value }),
+        'list-row-px': (value) => ({ '--list-row-padding-x': value }),
+      },
+      { values: theme('spacing') },
+    )
+    // Grid tracks are arbitrary-only (no meaningful scale):
+    // `max-md:list-cols-[minmax(0,1fr)_auto]` instead of
+    // `max-md:[--list-columns:minmax(0,1fr)_auto]`.
+    matchUtilities({
+      'list-cols': (value) => ({ '--list-columns': value }),
+    })
   },
   {
     theme: {
       colors: colorPalette,
-      borderRadius: borderRadius,
-      boxShadow: boxShadow,
+      borderRadius: buildRadiusConfig(),
+      boxShadow: {
+        none: 'none',
+        sm: 'var(--elevation-sm)',
+        base: 'var(--elevation-base)',
+        DEFAULT: 'var(--elevation-base)',
+        md: 'var(--elevation-md)',
+        lg: 'var(--elevation-lg)',
+        xl: 'var(--elevation-xl)',
+        '2xl': 'var(--elevation-2xl)',
+        status: 'var(--elevation-status)',
+      },
       container: {
         padding: {
           xl: '5rem',
         },
       },
-      fontSize: fontSize,
+      fontSize: buildFontSize(),
       screens: {
         sm: '640px',
         md: '768px',
@@ -73,11 +259,14 @@ export default plugin(
         },
         backgroundColor: {
           surface: semanticColors.surface,
+          'surface-alpha': semanticColors['surface-alpha'],
         },
         gradientColorStops: {
           surface: semanticColors.surface,
+          'surface-alpha': semanticColors['surface-alpha'],
           ink: semanticColors.ink,
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         },
         fill: {
           ink: semanticColors.ink,
@@ -92,12 +281,15 @@ export default plugin(
         borderColor: () => ({
           DEFAULT: 'var(--outline-gray-1)',
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         }),
         ringColor: {
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         },
         divideColor: {
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         },
         spacing: {
           4.5: '1.125rem',
@@ -260,7 +452,7 @@ export default plugin(
           v3: {
             css: [
               {
-                fontSize: 'var(--prose-font-size, 14px)',
+                fontSize: 'var(--prose-font-size, 15px)',
                 fontWeight: 420,
                 lineHeight: '1.7',
                 letterSpacing: '0.02em',
@@ -276,13 +468,26 @@ export default plugin(
                 // links: subtle bottom border, darkens on hover
                 a: {
                   textDecoration: 'none',
-                  borderBottom: '1px solid var(--ink-gray-3)',
+                  borderBottom: '1px solid var(--ink-gray-4)',
                   transition: 'border-color 0.08s ease',
                 },
                 'a:hover': {
                   borderBottom: '1px solid var(--ink-gray-6)',
                 },
 
+                // named text color + bold: the color lives on a `textStyle`
+                // span that wraps (or is wrapped by) `<strong>`. Typography's
+                // `strong { color: var(--tw-prose-bold) }` otherwise overrides
+                // the inherited named color, painting bold text gray. Mirror the
+                // base preset's `a strong { color: inherit }` so bold keeps the
+                // span's color in both nesting orders.
+                ':where(span[style*="--prose-color-"]) strong': {
+                  color: 'inherit',
+                },
+                'strong:where([style*="--prose-color-"])': {
+                  color: 'inherit',
+                },
+
                 // inline code: subtle pill — strip Tailwind's added quotes
                 'code::before': { content: 'none' },
                 'code::after': { content: 'none' },
@@ -380,7 +585,7 @@ export default plugin(
                 ol: {
                   marginTop: '4px',
                   marginBottom: '4px',
-                  paddingInlineStart: '1.5em',
+                  paddingInlineStart: '1.7em',
                 },
                 li: {
                   marginTop: '4px',

package/tailwind/preset.js

@@ -7,9 +7,24 @@ import lucideIconsPlugin from './lucideIconsPlugin.js'
 // config (it reads only the top-level config's content.files). So consuming
 // apps must list frappe-ui's source globs in their own tailwind.config
 // `content` — declaring them here would be silently ignored.
+// Stock Tailwind's numeric spacing scale has gaps above 12 (13, 15, 17, 18,
+// 19, 21… are undefined), so `h-17` / `size-17` silently don't compile. Fill
+// every integer 1–64 at the canonical 0.25rem step. Values match Tailwind's own
+// formula, so overriding the already-defined keys is a no-op; the win is the
+// in-between steps. Presets DO merge `theme` (unlike `content`), so this reaches
+// consuming apps automatically.
+const integerSpacing = Object.fromEntries(
+  Array.from({ length: 64 }, (_, i) => i + 1).map((n) => [n, `${n * 0.25}rem`]),
+)
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['selector', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      spacing: integerSpacing,
+    },
+  },
   // The editor applies `prose prose-v3` via a computed string in EditorContent,
   // which the JIT scanner can miss (HMR rebuilds, or a consumer that didn't add
   // the molecules glob to `content`) — then prose-v3 typography silently drops.

package/tailwind/tokens.js

@@ -1,45 +1,43 @@
-const borderRadius = {
-  none: '0px', // 0
-  sm: '0.25rem', // 4px
-  DEFAULT: '0.5rem', // 8px
-  md: '0.625rem', // 10px
-  lg: '0.75rem', // 12px
-  xl: '1rem', // 16px
-  '2xl': '1.25rem', // 20px
-  full: '9999px', // 9999px
-}
+// Public token exports for external consumers (Tailwind v3 presets, CSS-in-JS,
+// design-system tooling). Sourced from the Figma-synced `./generated/*` JSON;
+// the plugin reads the same generated files directly so both stay in sync via
+// `yarn sync-tokens`.
+import radiusTokens from './generated/radius.json'
+import typographyTokens from './generated/typography.json'
+import effectsData from './generated/effects.json'
+
+const borderRadius = radiusTokens
 
+// Elevation tokens are flipped per theme by the plugin via CSS vars; the
+// exported shape keeps static values so non-runtime consumers (snapshot tests,
+// docs tooling) still get sensible defaults.
 const boxShadow = {
-  sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
-  DEFAULT:
-    '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-  md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
-  lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
-  xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
-  '2xl':
-    '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
   none: 'none',
+  ...effectsData.elevation.light,
+  DEFAULT: effectsData.elevation.light.base,
+  ...effectsData.elevation.custom,
 }
 
-const fontSize = {
-  '2xs': ['11px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '420' }],
-  xs: ['12px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }],
-  sm: ['13px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }],
-  base: ['14px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }],
-  lg: ['16px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '400' }],
-  xl: ['18px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '400' }],
-  '2xl': ['20px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '400' }],
-  '3xl': ['24px', { lineHeight: '1.15', fontWeight: 400, letterSpacing: '0.005em' }],
-  // font size for paragraphs
-  'p-2xs': ['11px', { lineHeight: '1.6', letterSpacing: '0.01em', fontWeight: '420' }],
-  'p-xs': ['12px', { lineHeight: '1.6', letterSpacing: '0.02em', fontWeight: '420' }],
-  'p-sm': ['13px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '420' }],
-  'p-base': ['14px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '420' }],
-  'p-lg': ['16px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '400' }],
-  'p-xl': ['18px', { lineHeight: '1.42', letterSpacing: '0.01em', fontWeight: '400' }],
-  'p-2xl': ['20px', { lineHeight: '1.38', letterSpacing: '0.01em', fontWeight: '400' }],
-  'p-3xl': ['24px', { lineHeight: '1.2', fontWeight: 400, letterSpacing: '0.005em' }],
+// lineHeight, letterSpacing and fontWeight are baked into each size tuple by
+// the token sync (see figma-tokens-to-theme.js#buildTypography); mirror the
+// plugin's `buildFontSize` so this public export stays in sync.
+function buildFontSize() {
+  const out = {}
+  for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
+    out[key] = [size, { ...meta }]
+  }
+  for (const [key, p] of Object.entries(typographyTokens.paragraph || {})) {
+    if (!out[key]) continue
+    const [size, meta] = out[key]
+    out[`p-${key}`] = [
+      size,
+      { ...meta, lineHeight: p.lineHeight, letterSpacing: p.letterSpacing },
+    ]
+  }
+  return out
 }
 
+const fontSize = buildFontSize()
+
 export { borderRadius, boxShadow, fontSize }
-export * from "./colorPalette.js"
+export * from './colorPalette.js'

package/tsconfig.base.json

@@ -13,8 +13,8 @@
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true,
-    "types": ["vitest/globals", "unplugin-icons/types/vue"],
+    "types": ["vitest/globals", "unplugin-icons/types/vue", "node"],
     "declaration": true,
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": true
   }
 }

package/vitepress/components/Docs/CommandPalette.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { useData, useRouter, withBase } from 'vitepress'
+import { computed, ref, watch } from 'vue'
+import fuzzysort from 'fuzzysort'
+import {
+  ListboxContent,
+  ListboxFilter,
+  ListboxGroup,
+  ListboxGroupLabel,
+  ListboxItem,
+  ListboxRoot,
+} from 'reka-ui'
+
+import { Dialog } from 'frappe-ui'
+import type { SidebarItem } from './sidebarList'
+
+const open = defineModel<boolean>('open', { default: true })
+
+const { theme } = useData()
+const router = useRouter()
+
+const filterText = ref('')
+
+// Sidebar is supplied via themeConfig in the {text, items:[{text,link}]} shape.
+const sidebarList = theme.value.sidebar ?? []
+const allItems = sidebarList.flatMap((section) =>
+  section.items.map((item) => ({ ...item, section: section.text })),
+)
+const sectionOrder = sidebarList.map((s) => s.text)
+
+watch(open, (isOpen) => {
+  if (!isOpen) filterText.value = ''
+})
+
+const groupedResults = computed(() => {
+  const query = filterText.value.trim()
+  if (!query) return sidebarList
+
+  const matches = fuzzysort.go(query, allItems, {
+    key: 'text',
+    threshold: 0.3,
+    limit: 50,
+  })
+
+  const bySection = new Map<string, SidebarItem[]>()
+  for (const m of matches) {
+    const item = m.obj
+    if (!bySection.has(item.section)) bySection.set(item.section, [])
+    bySection.get(item.section)!.push(item)
+  }
+
+  return sectionOrder
+    .filter((name) => bySection.has(name))
+    .map((name) => ({ text: name, items: bySection.get(name)! }))
+})
+
+const hasResults = computed(() =>
+  groupedResults.value.some((g) => g.items.length > 0),
+)
+
+const highlightedLink = ref<string | null>(null)
+const onHighlight = (payload: { value: unknown } | undefined) => {
+  highlightedLink.value =
+    typeof payload?.value === 'string' ? payload.value : null
+}
+
+const navigateTo = (item: SidebarItem) => {
+  router.go(withBase(item.link))
+  open.value = false
+}
+
+// Native click on the anchor: let the browser handle modifier-clicks
+// (Cmd/Ctrl/Shift/middle-click) via the `href`; only intercept plain
+// clicks to do SPA navigation. Keyboard Enter on the highlighted item
+// reaches here too — Reka synthesises a `.click()` on the element,
+// which has no modifiers, so it falls through to `navigateTo`.
+const onItemClick = (e: MouseEvent, item: SidebarItem) => {
+  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return
+  e.preventDefault()
+  navigateTo(item)
+}
+
+const onFilterKeydown = (e: KeyboardEvent) => {
+  if (e.key !== 'Enter') return
+  if (!(e.metaKey || e.ctrlKey)) return
+  const link = highlightedLink.value
+  if (!link) return
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  window.open(withBase(link), '_blank', 'noopener')
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open" bare size="xl" position="top" padding-top="10vh">
+    <template #default>
+      <ListboxRoot
+        class="flex flex-col"
+        highlight-on-hover
+        :model-value="null"
+        @highlight="onHighlight"
+      >
+        <!-- input -->
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 flex items-center pl-4.5">
+            <span class="lucide-search h-4 w-4 text-ink-gray-6" />
+          </div>
+          <ListboxFilter
+            v-model="filterText"
+            auto-focus
+            placeholder="Search documentation"
+            class="w-full border-none bg-transparent py-3 pl-11.5 pr-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
+            autocomplete="off"
+            @keydown="onFilterKeydown"
+          />
+        </div>
+
+        <!-- results -->
+        <ListboxContent
+          class="max-h-96 overflow-auto border-t border-outline-gray-1 dark:border-outline-gray-2"
+        >
+          <ListboxGroup
+            v-for="group in groupedResults"
+            :key="group.text"
+            class="mb-2 mt-4.5 first:mt-3"
+          >
+            <ListboxGroupLabel
+              class="mb-2.5 block px-4.5 text-base text-ink-gray-5"
+            >
+              {{ group.text }}
+            </ListboxGroupLabel>
+
+            <div v-for="item in group.items" :key="item.link" class="px-2.5">
+              <ListboxItem
+                as="a"
+                :value="item.link"
+                :href="withBase(item.link)"
+                class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-7 outline-none data-[highlighted]:bg-surface-gray-3"
+                @click="onItemClick($event, item)"
+              >
+                <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+                  {{ item.text }}
+                </span>
+              </ListboxItem>
+            </div>
+          </ListboxGroup>
+
+          <div
+            v-if="filterText && !hasResults"
+            class="my-8 text-center text-base text-ink-gray-6"
+          >
+            No results for "<b class="text-ink-gray-9">{{ filterText }}</b
+            >"
+          </div>
+        </ListboxContent>
+
+        <!-- footer -->
+        <div
+          class="mt-2 flex items-center justify-between border-t border-outline-gray-1 px-2.5 py-2 text-xs text-ink-gray-6 dark:border-outline-gray-2"
+        >
+          <div class="flex items-center gap-4">
+            <div class="flex items-center gap-1">
+              <kbd
+                class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-surface-gray-2 p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-ink-gray-5"
+              >
+                <span class="lucide-arrow-down size-4" />
+              </kbd>
+              <kbd
+                class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-surface-gray-2 p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-ink-gray-5"
+              >
+                <span class="lucide-arrow-up size-4" />
+              </kbd>
+              <span class="ml-1">to navigate</span>
+            </div>
+            <div class="flex items-center gap-1">
+              <kbd
+                class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-surface-gray-2 p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-ink-gray-5"
+              >
+                <span class="lucide-corner-down-left size-4" />
+              </kbd>
+              <span class="ml-1">to select</span>
+            </div>
+            <div class="flex items-center gap-1">
+              <kbd
+                class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-surface-gray-2 p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-ink-gray-5"
+              >
+                <span class="lucide-command w-3 h-3" />
+                <span class="lucide-corner-down-left size-4" />
+              </kbd>
+              <span class="ml-1">new tab</span>
+            </div>
+            <div class="flex items-center gap-1">
+              <kbd
+                class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-surface-gray-2 p-0.5 px-1 font-[inherit] font-medium leading-normal tracking-[0.02em] text-sm text-ink-gray-5"
+              >
+                esc
+              </kbd>
+              <span class="ml-1">to close</span>
+            </div>
+          </div>
+          <div class="flex items-center gap-1">
+            <kbd
+              class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm bg-surface-gray-2 p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-ink-gray-5"
+            >
+              <span class="lucide-command w-3 h-3" />
+              <span class="text-sm">K</span>
+            </kbd>
+            <span class="ml-1">to open</span>
+          </div>
+        </div>
+      </ListboxRoot>
+    </template>
+  </Dialog>
+</template>