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

package/src/components/CodeEditor/languages.ts

@@ -0,0 +1,63 @@
+// Lazy language loading for CodeEditor.
+//
+// `loadLanguage` dynamically imports the matching `@codemirror/lang-*` package
+// so each language tree-shakes into its own async chunk (apps that never render
+// a code field pay nothing).
+//
+// Mapping a Frappe FormLayout fieldtype to a language key (`fieldtypeToLanguage`)
+// is FormLayout-specific glue and lives in `@framework/ui` alongside the field
+// wrapper, not here — this primitive stays framework-agnostic.
+
+import type { Extension } from '@codemirror/state'
+
+/**
+ * Dynamically import the CodeMirror language extension for `key`.
+ * Returns `null` for plain text / unknown keys (no highlighting).
+ */
+export async function loadLanguage(key?: string): Promise<Extension | null> {
+  switch (key) {
+    case 'json': {
+      const { json } = await import('@codemirror/lang-json')
+      return json()
+    }
+    case 'html': {
+      const { html } = await import('@codemirror/lang-html')
+      return html()
+    }
+    case 'javascript': {
+      const { javascript } = await import('@codemirror/lang-javascript')
+      return javascript()
+    }
+    case 'python': {
+      const { python } = await import('@codemirror/lang-python')
+      return python()
+    }
+    case 'sql': {
+      const { sql } = await import('@codemirror/lang-sql')
+      return sql()
+    }
+    case 'markdown': {
+      const { markdown } = await import('@codemirror/lang-markdown')
+      return markdown()
+    }
+    case 'css': {
+      const { css } = await import('@codemirror/lang-css')
+      return css()
+    }
+    case 'scss': {
+      // `lang-sass` covers both — `indented: false` selects SCSS (brace) syntax.
+      const { sass } = await import('@codemirror/lang-sass')
+      return sass({ indented: false })
+    }
+    case 'yaml': {
+      const { yaml } = await import('@codemirror/lang-yaml')
+      return yaml()
+    }
+    case 'xml': {
+      const { xml } = await import('@codemirror/lang-xml')
+      return xml()
+    }
+    default:
+      return null
+  }
+}

package/src/components/CodeEditor/stories/Default.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CodeEditor } from 'frappe-ui/code-editor'
+
+const code = ref(`function greet(name) {\n\treturn \`Hello, \${name}!\`\n}`)
+</script>
+
+<template>
+  <div class="w-full max-w-xl">
+    <CodeEditor
+      v-model="code"
+      language="javascript"
+      placeholder="Type some code…"
+    />
+  </div>
+</template>

package/src/components/CodeEditor/stories/Labeling.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CodeEditor } from 'frappe-ui/code-editor'
+
+const code = ref(`{\n  "host": "127.0.0.1",\n  "port": "oops"\n}`)
+</script>
+
+<template>
+  <div class="w-full max-w-xl space-y-6">
+    <CodeEditor
+      v-model="code"
+      language="json"
+      label="Configuration"
+      description="Paste the service config as JSON."
+      required
+    />
+    <CodeEditor
+      v-model="code"
+      language="json"
+      label="Configuration"
+      error="`port` must be a number."
+      required
+    />
+  </div>
+</template>

package/src/components/CodeEditor/stories/MaxHeight.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CodeEditor } from 'frappe-ui/code-editor'
+
+const overflowing = ref(false)
+const code = ref(
+  Array.from({ length: 30 }, (_, i) => `const line${i + 1} = ${i + 1}`).join(
+    '\n',
+  ),
+)
+</script>
+
+<template>
+  <div class="w-full max-w-xl">
+    <!-- The cap is a CSS hook, not a prop: set `--cm-max-height` on the root. -->
+    <CodeEditor
+      v-model="code"
+      language="javascript"
+      style="--cm-max-height: 12rem"
+      @overflow="(v) => (overflowing = v)"
+    />
+    <p class="mt-2 text-xs text-ink-gray-6">overflowing = {{ overflowing }}</p>
+  </div>
+</template>

package/src/components/CodeEditor/stories/Preview.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from 'frappe-ui'
+import { CodeEditor, CodePreview } from 'frappe-ui/code-editor'
+
+const mode = ref<'write' | 'preview'>('write')
+const markdown = ref(
+  `# Notes\n\nSome **bold** text and a [link](https://frappe.io).`,
+)
+</script>
+
+<template>
+  <div class="w-full max-w-xl">
+    <div class="mb-2 flex gap-1">
+      <Button
+        :variant="mode === 'write' ? 'subtle' : 'ghost'"
+        size="sm"
+        label="Write"
+        @click="mode = 'write'"
+      />
+      <Button
+        :variant="mode === 'preview' ? 'subtle' : 'ghost'"
+        size="sm"
+        label="Preview"
+        @click="mode = 'preview'"
+      />
+    </div>
+    <CodeEditor v-show="mode === 'write'" v-model="markdown" language="markdown" />
+    <CodePreview
+      v-if="mode === 'preview'"
+      :model-value="markdown"
+      language="markdown"
+      class="min-h-[4.5rem] rounded-md border border-surface-gray-2 p-3 mt-3"
+    />
+  </div>
+</template>

package/src/components/CodeEditor/stories/Sizes.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CodeEditor } from 'frappe-ui/code-editor'
+
+const code = ref(`const sum = (a, b) => a + b`)
+</script>
+
+<template>
+  <div class="w-full max-w-xl space-y-4">
+    <CodeEditor v-model="code" language="javascript" size="sm" />
+    <CodeEditor v-model="code" language="javascript" size="md" />
+    <CodeEditor v-model="code" language="javascript" size="lg" />
+    <CodeEditor v-model="code" language="javascript" size="xl" />
+  </div>
+</template>

package/src/components/CodeEditor/stories/Variants.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CodeEditor } from 'frappe-ui/code-editor'
+
+const code = ref(`{\n  "name": "frappe-ui",\n  "private": true\n}`)
+</script>
+
+<template>
+  <div class="w-full max-w-xl space-y-4">
+    <CodeEditor v-model="code" language="json" variant="subtle" />
+    <CodeEditor v-model="code" language="json" variant="outline" />
+  </div>
+</template>

package/src/components/CodeEditor/theme.ts

@@ -0,0 +1,272 @@
+// Base CodeMirror theme + token-keyed syntax highlighting for CodeEditor, split
+// out of the SFC so the ~200 lines of style literals don't drown the editor
+// logic. Both helpers take the CodeMirror modules as params (rather than
+// importing them) so the lazy-load isolation holds: this file pulls no editor
+// code into the static graph — `@codemirror/language` / `@lezer/highlight` load
+// via dynamic `import()` only when the editor actually mounts.
+import type { Extension } from '@codemirror/state'
+
+// lucide `chevron-down`, used as a CSS mask so the fold marker inherits the
+// gutter's `currentColor` (and so flips with the theme) instead of baking a
+// fill. Single-quoted attrs keep it embeddable in this double-quoted string.
+const FOLD_CHEVRON =
+  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")"
+
+// Chrome theme. Every color is a frappe-ui `--surface-*` / `--ink-*` token, and
+// those tokens are re-mapped under `[data-theme="dark"]` — so the editor follows
+// the app's light/dark scheme for free (no JS observation, no second theme to
+// swap). The literal fallbacks are the light values, used only when a consumer
+// renders the editor outside the token system.
+export function buildBaseTheme(
+  cmView: typeof import('@codemirror/view'),
+): Extension {
+  return cmView.EditorView.theme({
+    '&': {
+      // Font size is owned by `buildSize` (the `size` compartment) — setting it
+      // here too would fight that theme on equal specificity and, depending on
+      // StyleModule injection order, silently win and pin every size to 13px.
+      color: 'var(--ink-gray-8, #1e293b)',
+      borderRadius: 'var(--radius-md, 0.5rem)',
+      overflow: 'hidden',
+      // Height cap, driven by the `--cm-max-height` CSS var a consumer sets on
+      // the root (`none` when unset, so the editor grows to fit). The inner
+      // `.cm-scroller` scrolls once content passes the cap. There's no
+      // `maxHeight` prop — the cap is a CSS hook (P10), not a style prop.
+      maxHeight: 'var(--cm-max-height, none)',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-scroller': {
+      overflow: 'auto',
+    },
+    '.cm-content': {
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+      caretColor: 'var(--ink-gray-8, #1e293b)',
+      padding: '6px 0',
+      // Min-height is owned by `buildSize` (the `size` compartment) — see the
+      // note on `&`'s font size above for why it isn't duplicated here.
+    },
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: 'var(--ink-gray-8, #1e293b)',
+    },
+    '.cm-line': {
+      padding: '0 6px',
+    },
+    // Gutter surface is owned by the variant compartment (`buildVariant`), the
+    // sole source of surface chrome — it paints `.cm-gutters` to match `&` in
+    // every state (hover/focus/disabled). It deliberately can't stay transparent:
+    // the gutter is sticky and the content scrolls *under* it, so a see-through
+    // gutter lets horizontally-scrolled code bleed through behind the line
+    // numbers. No divider border (overrides `basicSetup`'s default right border,
+    // hence an explicit `none`) so the gutter reads as part of the surface.
+    '.cm-gutters': {
+      borderRight: 'none',
+      color: 'var(--ink-gray-5, #64748b)',
+    },
+    // Scroll shadow: while the content is scrolled horizontally it slides under
+    // the sticky gutter, so a right-edge shadow signals the hidden code. It's a
+    // pseudo-element rather than a `box-shadow` on `.cm-gutters` itself because
+    // CodeMirror stretches the gutter to the full editor height (`.cm-content`
+    // fills it, and the gutter's `min-height` tracks that) — a gutter shadow
+    // would run down past the last line into the empty area below, where, with
+    // the gutter camouflaged against the surface, it looks like a shadow
+    // floating in space. Instead this overlay is capped to the actual text
+    // height via `--cm-text-height` (the last line's bottom, set from the SFC),
+    // so it ends with the code. `cm-scrolled-x` (also set there) fades it in.
+    '.cm-gutters::after': {
+      content: '""',
+      position: 'absolute',
+      top: '0',
+      right: '0',
+      width: '6px',
+      height: 'var(--cm-text-height, 100%)',
+      transform: 'translateX(100%)',
+      pointerEvents: 'none',
+      opacity: '0',
+      transition: 'opacity 0.15s ease',
+      background: 'linear-gradient(to right, rgba(0, 0, 0, 0.16), transparent)',
+    },
+    '&.cm-scrolled-x .cm-gutters::after': {
+      opacity: '1',
+    },
+    // Fold marker. `basicSetup` renders a bare text caret pinned to the
+    // cell's top-left; center it and swap the glyph for a masked chevron
+    // (inherits the gutter `currentColor`). The marker carries no open/closed
+    // class, but its `title` differs — so rotate it to point right when folded.
+    '.cm-foldGutter .cm-gutterElement': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '0 2px',
+      cursor: 'pointer',
+    },
+    '.cm-foldGutter .cm-gutterElement:hover': {
+      color: 'var(--ink-gray-8, #1e293b)',
+    },
+    '.cm-foldGutter .cm-gutterElement > span': {
+      display: 'block',
+      width: '14px',
+      height: '14px',
+      fontSize: '0',
+      backgroundColor: 'currentColor',
+      transition: 'transform 0.12s ease',
+      WebkitMaskImage: FOLD_CHEVRON,
+      maskImage: FOLD_CHEVRON,
+      WebkitMaskRepeat: 'no-repeat',
+      maskRepeat: 'no-repeat',
+      WebkitMaskPosition: 'center',
+      maskPosition: 'center',
+      WebkitMaskSize: '14px 14px',
+      maskSize: '14px 14px',
+    },
+    ".cm-foldGutter .cm-gutterElement > span[title='Unfold line']": {
+      transform: 'rotate(-90deg)',
+    },
+    // The fold gutter otherwise reserves a column even when nothing on screen is
+    // foldable (plain text, a flat markdown doc) — dead space next to the code.
+    // Collapse it to zero width until at least one line renders a real fold
+    // chevron. The catch: CodeMirror sizes the gutter with an always-present
+    // hidden "spacer" element (a FoldMarker span tagged with inline
+    // `visibility: hidden`), so a naive `:has(> span)` is always true. We exclude
+    // the spacer with `:not([style*='visibility'])`, leaving only the chevrons
+    // that actually appear on foldable lines. `overflow: hidden` then clips the
+    // spacer's span so it stops reserving width once collapsed. `:has`
+    // re-evaluates live, so the column appears/disappears as folds come and go.
+    ".cm-foldGutter:not(:has(.cm-gutterElement:not([style*='visibility']) > span))":
+      {
+        width: '0',
+        overflow: 'hidden',
+      },
+    ".cm-foldGutter:not(:has(.cm-gutterElement:not([style*='visibility']) > span)) .cm-gutterElement":
+      {
+        padding: '0',
+      },
+    // Same for the JSON lint gutter: it holds a fixed column for diagnostic
+    // markers, but valid JSON has none, so collapse it until a `.cm-lint-marker`
+    // appears. The column springs back the moment the parser reports an error.
+    '.cm-gutter-lint:not(:has(.cm-lint-marker))': {
+      width: '0',
+    },
+    '.cm-gutter-lint:not(:has(.cm-lint-marker)) .cm-gutterElement': {
+      padding: '0',
+    },
+    // `basicSetup` highlights the active line/gutter in a default light blue.
+    // A fixed gray token can't stay visible across every surface the row sits on
+    // — the `subtle` fill (gray-2), its hover fill (gray-3), and the white
+    // `outline` surface — and using gray-3 makes the row vanish on hover, where
+    // the surface itself becomes gray-3. Instead use a low-alpha `ink-gray-9`
+    // overlay: it darkens (light mode) or lightens (dark mode, where the token
+    // flips to near-white) whatever surface is beneath by a constant amount, so
+    // the active row always reads. Being mostly transparent, it also lets the
+    // selection — drawn behind the content — show through on the active row.
+    '.cm-activeLine': {
+      backgroundColor:
+        'color-mix(in srgb, var(--ink-gray-9, #0f0f0f) 7%, transparent)',
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor:
+        'color-mix(in srgb, var(--ink-gray-9, #0f0f0f) 7%, transparent)',
+      color: 'var(--ink-gray-7, #525252)',
+    },
+    // Autocomplete / hover tooltips (from `basicSetup`) default to a light
+    // popup — theme them off `--surface-elevation-2` (the elevated popover surface)
+    // so the dropdown follows dark mode instead of flashing white.
+    '.cm-tooltip': {
+      backgroundColor: 'var(--surface-elevation-2, white)',
+      border: '1px solid var(--surface-gray-3, #cbd5e1)',
+      borderRadius: 'var(--radius-md, 0.5rem)',
+      color: 'var(--ink-gray-8, #1e293b)',
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.12)',
+      overflow: 'hidden',
+    },
+    '.cm-tooltip-autocomplete > ul': {
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+    },
+    '.cm-tooltip-autocomplete > ul > li': {
+      color: 'var(--ink-gray-7, #475569)',
+      padding: '2px 6px',
+    },
+    '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+      backgroundColor: 'var(--surface-gray-3, #e2e8f0)',
+      color: 'var(--ink-gray-9, #0f172a)',
+    },
+    '.cm-completionIcon': {
+      color: 'var(--ink-gray-5, #64748b)',
+    },
+    '.cm-completionMatchedText': {
+      color: 'var(--ink-blue-6)',
+      textDecoration: 'none',
+      fontWeight: '600',
+    },
+    '.cm-completionDetail': {
+      color: 'var(--ink-gray-5, #64748b)',
+      fontStyle: 'italic',
+    },
+  })
+}
+
+// Syntax highlighting keyed to `--ink-*` tokens so the palette flips with the
+// app theme. `basicSetup` already installs CodeMirror's default (light-tuned)
+// highlight style; layering this at the highest precedence makes it win for
+// every tag we define, and the default only fills the rare gaps we don't.
+export async function buildSyntaxHighlight(
+  cmState: typeof import('@codemirror/state'),
+): Promise<Extension> {
+  const { HighlightStyle, syntaxHighlighting } =
+    await import('@codemirror/language')
+  const { tags } = await import('@lezer/highlight')
+  const highlightStyle = HighlightStyle.define([
+    {
+      tag: [tags.keyword, tags.moduleKeyword, tags.controlKeyword],
+      color: 'var(--ink-blue-6)',
+    },
+    {
+      tag: [tags.string, tags.special(tags.string), tags.regexp],
+      color: 'var(--ink-green-6)',
+    },
+    {
+      tag: [tags.comment, tags.lineComment, tags.blockComment],
+      color: 'var(--ink-gray-5)',
+      fontStyle: 'italic',
+    },
+    {
+      tag: [tags.number, tags.bool, tags.null, tags.atom],
+      color: 'var(--ink-amber-6)',
+    },
+    {
+      tag: [tags.typeName, tags.className, tags.namespace],
+      color: 'var(--ink-amber-6)',
+    },
+    {
+      tag: [
+        tags.function(tags.variableName),
+        tags.function(tags.propertyName),
+        tags.labelName,
+      ],
+      color: 'var(--ink-blue-6)',
+    },
+    { tag: [tags.propertyName, tags.attributeName], color: 'var(--ink-red-6)' },
+    { tag: [tags.tagName, tags.angleBracket], color: 'var(--ink-red-6)' },
+    {
+      tag: [tags.operator, tags.punctuation, tags.separator, tags.bracket],
+      color: 'var(--ink-gray-6)',
+    },
+    {
+      tag: [tags.variableName, tags.definition(tags.variableName)],
+      color: 'var(--ink-gray-8)',
+    },
+    { tag: tags.meta, color: 'var(--ink-gray-5)' },
+    {
+      tag: [tags.link, tags.url],
+      color: 'var(--ink-blue-6)',
+      textDecoration: 'underline',
+    },
+    { tag: tags.heading, color: 'var(--ink-blue-6)', fontWeight: 'bold' },
+    { tag: tags.strong, fontWeight: 'bold' },
+    { tag: tags.emphasis, fontStyle: 'italic' },
+    { tag: tags.strikethrough, textDecoration: 'line-through' },
+    { tag: tags.invalid, color: 'var(--ink-red-8)' },
+  ])
+  return cmState.Prec.highest(syntaxHighlighting(highlightStyle))
+}

package/src/components/CodeEditor/types.ts

@@ -0,0 +1,69 @@
+// Props/emits for the CodeEditor writer primitive. Kept here so the field
+// wrapper and stories can share the same contract without importing the .vue.
+
+import type { InputLabelingProps } from '../../composables/useInputLabeling'
+import type { InputSize, InputVariant } from '../../composables/inputTypes'
+
+/** A language key understood by `loadLanguage`. */
+export type CodeLanguage =
+  | 'json'
+  | 'html'
+  | 'javascript'
+  | 'python'
+  | 'sql'
+  | 'markdown'
+  | 'css'
+  | 'scss'
+  | 'yaml'
+  | 'xml'
+  | 'plain'
+
+export interface CodeEditorProps extends InputLabelingProps {
+  /** The editor's text content (controlled, two-way via `v-model`). */
+  modelValue: string
+  /**
+   * CodeMirror language key; falls through to plain text when unset/unknown.
+   * Typed as `CodeLanguage | (string & {})` so the known keys autocomplete
+   * while an arbitrary string still type-checks.
+   */
+  language?: CodeLanguage | (string & {})
+  /** If true, the editor is disabled: greyed out and not editable. */
+  disabled?: boolean
+  /** Placeholder shown when the editor is empty. */
+  placeholder?: string
+  /**
+   * Surface style; derived from the shared `InputVariant` union so the code
+   * field can't drift from the TextInput/Textarea fields it sits next to.
+   * `subtle` is the filled default, `outline` is a bordered-on-white box.
+   * `ghost` (borderless) is excluded — a borderless code surface reads as plain
+   * text and loses the affordance that it's an editable field. Defaults to
+   * `subtle`.
+   */
+  variant?: Exclude<InputVariant, 'ghost'>
+  /**
+   * Size token, mirroring frappe-ui inputs. Scales the editor's font size and
+   * minimum height (`sm | md | lg | xl`). Defaults to `md`.
+   */
+  size?: InputSize
+}
+
+export type CodeEditorEmits = {
+  /** Live document text on every change — mirrors the textarea field contract. */
+  'update:modelValue': [value: string]
+  /** Commit (blur). The field wrapper normalizes (e.g. JSON pretty-print) here. */
+  change: [value: string]
+  /**
+   * Whether the content currently overflows the height cap (only transitions are
+   * emitted). The cap is set in CSS via the `--cm-max-height` custom property on
+   * the root (there's no `maxHeight` prop — styling lives in CSS per P10); this
+   * emit reports the crossing because a consumer can't measure it from CSS.
+   */
+  overflow: [overflowing: boolean]
+}
+
+export interface CodePreviewProps {
+  /** The source text to render as sanitized preview output. */
+  modelValue: string
+  /** Only `markdown` / `html` render a preview; anything else renders nothing. */
+  language?: CodeLanguage | (string & {})
+}

package/src/components/Combobox/Combobox.api.md

@@ -165,7 +165,7 @@
   {
     name: 'trigger',
     description: 'Fully custom trigger renderer.',
-    type: 'ComboboxTriggerSlotProps'
+    type: 'ComboboxControlSlotProps'
   },
   {
     name: 'label',
@@ -179,13 +179,13 @@
   },
   {
     name: 'prefix',
-    description: 'Content rendered before the default input. Receives the same shape\nas `#trigger` and `#suffix` (`ComboboxSlotProps`).',
-    type: 'ComboboxTriggerSlotProps'
+    description: 'Content rendered before the default input. Receives the same shape\nas the other control slots.',
+    type: 'ComboboxControlSlotProps'
   },
   {
     name: 'suffix',
     description: 'Content rendered after the input (input mode) or label (button mode).\nProviding this slot **replaces the default chevron** — render your\nown fallback (e.g. the chevron) when your slot content is conditional.\nCommon use: an inline clear button. Use `@click.stop` and\n`@pointerdown.stop` so the press doesn\'t toggle the popover.',
-    type: 'ComboboxTriggerSlotProps'
+    type: 'ComboboxControlSlotProps'
   },
   {
     name: 'item-prefix',
@@ -219,8 +219,8 @@
   },
   {
     name: 'footer',
-    description: 'Content rendered after the list. Stays pinned below the scrollable options.',
-    type: 'ComboboxFooterSlotProps'
+    description: 'Content rendered after the list. Stays pinned below the scrollable\noptions.',
+    type: 'ComboboxControlSlotProps'
   }
 ]
 
@@ -235,20 +235,15 @@
     description: 'Fired when the query changes.',
     type: '[value: string]'
   },
-  {
-    name: 'input',
-    description: '',
-    type: '[value: string]'
-  },
   {
     name: 'update:open',
     description: 'Fired when the open state changes.',
     type: '[value: boolean]'
   },
   {
-    name: 'update:selectedOption',
-    description: 'Fired when the selected option changes.',
-    type: '[option: ComboboxSelectableOption | ComboboxCustomOption | null]'
+    name: 'blur',
+    description: '',
+    type: '[event: FocusEvent]'
   },
   {
     name: 'focus',
@@ -256,17 +251,21 @@
     type: '[event: FocusEvent]'
   },
   {
-    name: 'blur',
+    name: 'input',
     description: '',
-    type: '[event: FocusEvent]'
+    type: '[value: string]'
+  },
+  {
+    name: 'update:selectedOption',
+    description: 'Fired when the selected option changes.',
+    type: '[option: ComboboxSelectableOption | ComboboxCustomOption | null]'
   }
 ]
 </script>
 ## API Reference
 
-<PropsTable name="Combobox" :data="propsData"/> 
-
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Combobox" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>