frappe-ui 1.0.0-beta.69 → 1.0.0-beta.70

package/experimental/CodeEditor/CodeEditor.api.md

@@ -60,9 +60,9 @@
   },
   {
     name: 'error',
-    description: 'Error message rendered below the input. When set, the control receives\n`aria-invalid="true"` and `data-state="invalid"`. May be either a string\nor an `Error` object whose `messages?: string[]` is rendered as stacked\nlines (with `Error.message` as the fallback).',
+    description: 'Error message rendered below the input. When set, the control receives\n`aria-invalid="true"` and `data-state="invalid"`. Takes a string, an\narray of strings, or an `Error` whose `messages` are rendered as stacked\nlines (with `Error.message` as the fallback). This is the same value\n`ErrorMessage.message` takes. An empty array and an empty string both\nmean no error.',
     required: false,
-    type: 'string | FrappeUIError'
+    type: 'ErrorMessageValue'
   },
   {
     name: 'required',

package/experimental.ts

@@ -10,7 +10,6 @@ export {
   InputError,
 } from './src/components/InputLabeling'
 export { useInputLabeling } from './src/composables/useInputLabeling'
-export type { FrappeUIError } from './src/composables/useInputLabeling'
 export {
   CodeEditor,
   CodePreview,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.69",
+  "version": "1.0.0-beta.70",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -26,7 +26,8 @@
     "tokens-v2": "./tailwind/migrate-tokens-v2.js",
     "shortcuts-v1": "./scripts/migrate-shortcuts-v1.js",
     "editor-v1": "./scripts/migrate-editor-v1.js",
-    "destinations-v1": "./scripts/migrate-destinations-v1.js"
+    "destinations-v1": "./scripts/migrate-destinations-v1.js",
+    "data-v1": "./scripts/migrate-data-v1.js"
   },
   "scripts": {
     "test": "vitest --run",
@@ -113,6 +114,8 @@
     "scripts/migrate-list-v1.js",
     "scripts/migrate-navigation-v1.js",
     "scripts/migrate-overlays-v1.js",
+    "scripts/migrate-destinations-v1.js",
+    "scripts/migrate-data-v1.js",
     "experimental",
     "experimental.ts",
     "tsconfig.base.json"

package/scripts/migrate-data-v1.js

@@ -0,0 +1,424 @@
+#!/usr/bin/env node
+/**
+ * Data v1 migration codemod.
+ *
+ * The FrappeUI plugin's `resources` option is a boolean in v1. The object
+ * form was never read — the plugin only checked whether the value was set —
+ * so every object value becomes `true`:
+ *
+ *   app.use(FrappeUI, { resources: { todos } })  ->  app.use(FrappeUI, { resources: true })
+ *
+ * A value the codemod cannot read (a variable, a call, a spread) is reported
+ * and the file is left unchanged.
+ *
+ * Usage: data-v1 [--dry-run] <dir-or-file...>
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import ts from 'typescript'
+import { parse as parseSfc } from '@vue/compiler-sfc'
+
+const USAGE = `Usage: data-v1 [--dry-run] <dir-or-file...>
+
+Narrows the FrappeUI plugin's resources option to a boolean:
+  app.use(FrappeUI, { resources: { … } }) -> app.use(FrappeUI, { resources: true })`
+
+const SCRIPT_EXTENSIONS = new Set([
+  '.js',
+  '.mjs',
+  '.cjs',
+  '.jsx',
+  '.ts',
+  '.mts',
+  '.cts',
+  '.tsx',
+])
+const EXTENSIONS = new Set([...SCRIPT_EXTENSIONS, '.vue'])
+const SKIP_DIRS = new Set(['node_modules', '.git', 'dist', 'build', 'coverage'])
+
+function walk(target, visited = new Set()) {
+  if (fs.lstatSync(target).isSymbolicLink()) return []
+  const resolved = fs.realpathSync(target)
+  if (visited.has(resolved)) return []
+  visited.add(resolved)
+  if (fs.statSync(resolved).isFile()) {
+    return EXTENSIONS.has(path.extname(target)) ? [target] : []
+  }
+  return fs.readdirSync(resolved, { withFileTypes: true }).flatMap((entry) => {
+    if (SKIP_DIRS.has(entry.name)) return []
+    return walk(path.join(target, entry.name), visited)
+  })
+}
+
+function lineAt(source, offset) {
+  return source.slice(0, offset).split('\n').length
+}
+
+function scriptKindFor(filename) {
+  const extension = path.extname(filename)
+  if (extension === '.tsx' || extension === '.jsx') return ts.ScriptKind.TSX
+  return ts.ScriptKind.TS
+}
+
+/**
+ * Names the frappe-ui plugin is bound to in this chunk.
+ *
+ * `FrappeUI` is a named export, so `import { FrappeUI }` and
+ * `import { FrappeUI as Plugin }` are the two direct forms. A namespace
+ * import is matched through its `.FrappeUI` property access instead.
+ */
+function pluginBindings(sourceFile) {
+  const direct = new Set()
+  const namespaces = new Set()
+  for (const statement of sourceFile.statements) {
+    if (!ts.isImportDeclaration(statement)) continue
+    if (!ts.isStringLiteral(statement.moduleSpecifier)) continue
+    if (statement.moduleSpecifier.text !== 'frappe-ui') continue
+    const bindings = statement.importClause?.namedBindings
+    if (!bindings) continue
+    if (ts.isNamespaceImport(bindings)) {
+      namespaces.add(bindings.name.text)
+      continue
+    }
+    for (const element of bindings.elements) {
+      const imported = element.propertyName?.text ?? element.name.text
+      if (imported === 'FrappeUI') direct.add(element.name.text)
+    }
+  }
+  return { direct, namespaces }
+}
+
+/** Names a node declares in its own scope. Parameters included. */
+function declaredNames(node) {
+  const names = new Set()
+  const addBindingName = (name) => {
+    if (ts.isIdentifier(name)) {
+      names.add(name.text)
+      return
+    }
+    for (const element of name.elements ?? []) {
+      if (ts.isOmittedExpression(element)) continue
+      addBindingName(element.name)
+    }
+  }
+
+  const addStatement = (statement) => {
+    if (ts.isVariableStatement(statement)) {
+      for (const declaration of statement.declarationList.declarations) {
+        addBindingName(declaration.name)
+      }
+    } else if (
+      (ts.isFunctionDeclaration(statement) || ts.isClassDeclaration(statement)) &&
+      statement.name
+    ) {
+      names.add(statement.name.text)
+    }
+  }
+
+  for (const parameter of node.parameters ?? []) addBindingName(parameter.name)
+  // `catch (error)` binds its parameter through `variableDeclaration`, not
+  // `parameters`.
+  if (ts.isCatchClause(node) && node.variableDeclaration) {
+    addBindingName(node.variableDeclaration.name)
+  }
+  // A named function expression binds its own name inside its body, and
+  // nowhere else. `const f = function FrappeUI() { … }` shadows the import.
+  if (
+    (ts.isFunctionExpression(node) || ts.isClassExpression(node)) &&
+    node.name
+  ) {
+    names.add(node.name.text)
+  }
+  // A source file, a bare block and a namespace body hold their own
+  // statements. Everything else that opens a scope keeps them under `body`,
+  // which is undefined for those, so read the node itself in those cases.
+  const body =
+    ts.isSourceFile(node) || ts.isBlock(node) || ts.isModuleBlock(node)
+      ? node
+      : node.body
+  if (body && 'statements' in body) {
+    for (const statement of body.statements) addStatement(statement)
+  }
+  // `switch` bodies share one scope across every clause, and a clause without
+  // braces keeps its statements on the clause, not on a block.
+  if (ts.isCaseBlock(node)) {
+    for (const clause of node.clauses) {
+      for (const statement of clause.statements) addStatement(statement)
+    }
+  }
+  // `for (…;;)`, `for…of` and `for…in` all bind their loop variable in the
+  // loop's own scope, through `initializer`.
+  if (
+    (ts.isForStatement(node) ||
+      ts.isForOfStatement(node) ||
+      ts.isForInStatement(node)) &&
+    node.initializer &&
+    ts.isVariableDeclarationList(node.initializer)
+  ) {
+    for (const declaration of node.initializer.declarations) {
+      addBindingName(declaration.name)
+    }
+  }
+  return names
+}
+
+function opensScope(node) {
+  return (
+    ts.isSourceFile(node) ||
+    ts.isFunctionDeclaration(node) ||
+    ts.isFunctionExpression(node) ||
+    ts.isArrowFunction(node) ||
+    ts.isMethodDeclaration(node) ||
+    ts.isConstructorDeclaration(node) ||
+    ts.isGetAccessorDeclaration(node) ||
+    ts.isSetAccessorDeclaration(node) ||
+    ts.isBlock(node) ||
+    ts.isCaseBlock(node) ||
+    ts.isModuleBlock(node) ||
+    ts.isClassExpression(node) ||
+    ts.isForStatement(node) ||
+    ts.isForOfStatement(node) ||
+    ts.isForInStatement(node) ||
+    ts.isCatchClause(node)
+  )
+}
+
+function propertyName(property) {
+  const name = property.name
+  if (!name) return undefined
+  if (ts.isIdentifier(name)) return name.text
+  if (ts.isStringLiteral(name)) return name.text
+  return undefined
+}
+
+/**
+ * Rewrites one script chunk. `offset` maps chunk positions back onto the
+ * original file so refusal line numbers and edits line up in `.vue` files.
+ */
+function migrateChunk(text, offset, filename, source) {
+  const sourceFile = ts.createSourceFile(
+    filename,
+    text,
+    ts.ScriptTarget.Latest,
+    true,
+    scriptKindFor(filename),
+  )
+  const { direct, namespaces } = pluginBindings(sourceFile)
+  if (!direct.size && !namespaces.size) return { edits: [], refusals: [] }
+
+  const edits = []
+  const refusals = []
+  const refuse = (node, message) => {
+    refusals.push({ line: lineAt(source, offset + node.getStart(sourceFile)), message })
+  }
+
+  /** True when `name` resolves to something other than the frappe-ui import. */
+  const isShadowed = (name, scopes) => {
+    for (let index = scopes.length - 1; index > 0; index--) {
+      if (scopes[index].has(name)) return true
+    }
+    return false
+  }
+
+  const isPluginArgument = (argument, scopes) => {
+    if (ts.isIdentifier(argument)) {
+      return direct.has(argument.text) && !isShadowed(argument.text, scopes)
+    }
+    if (
+      ts.isPropertyAccessExpression(argument) &&
+      ts.isIdentifier(argument.expression) &&
+      argument.name.text === 'FrappeUI'
+    ) {
+      return (
+        namespaces.has(argument.expression.text) &&
+        !isShadowed(argument.expression.text, scopes)
+      )
+    }
+    return false
+  }
+
+  const visitCall = (node, scopes) => {
+    if (!ts.isPropertyAccessExpression(node.expression)) return
+    if (node.expression.name.text !== 'use') return
+    const [plugin, options] = node.arguments
+    if (!plugin || !isPluginArgument(plugin, scopes)) return
+    if (!options) return
+
+    if (!ts.isObjectLiteralExpression(options)) {
+      refuse(
+        options,
+        'app.use(FrappeUI, …) receives options this codemod cannot read. Set `resources` to true or false by hand if the value is an object.',
+      )
+      return
+    }
+
+    for (const property of options.properties) {
+      if (ts.isSpreadAssignment(property)) {
+        refuse(
+          property,
+          'the FrappeUI options object spreads another value that may carry `resources`. Narrow it to a boolean by hand.',
+        )
+        continue
+      }
+      if (
+        ts.isPropertyAssignment(property) &&
+        property.name &&
+        ts.isComputedPropertyName(property.name)
+      ) {
+        refuse(
+          property,
+          'the FrappeUI options object uses a computed key that may be `resources`. Narrow it to a boolean by hand.',
+        )
+        continue
+      }
+      if (propertyName(property) !== 'resources') continue
+
+      if (ts.isShorthandPropertyAssignment(property)) {
+        refuse(
+          property,
+          '`resources` is bound to a variable. Pass true or false instead.',
+        )
+        continue
+      }
+      if (!ts.isPropertyAssignment(property)) continue
+
+      const value = property.initializer
+      if (
+        value.kind === ts.SyntaxKind.TrueKeyword ||
+        value.kind === ts.SyntaxKind.FalseKeyword
+      ) {
+        continue
+      }
+      if (!ts.isObjectLiteralExpression(value)) {
+        refuse(
+          value,
+          '`resources` is set to a value this codemod cannot read. Pass true or false instead.',
+        )
+        continue
+      }
+      edits.push({
+        start: offset + value.getStart(sourceFile),
+        end: offset + value.getEnd(),
+        text: 'true',
+      })
+    }
+  }
+
+  const visit = (node, scopes) => {
+    const nextScopes = opensScope(node)
+      ? [...scopes, declaredNames(node)]
+      : scopes
+    if (ts.isCallExpression(node)) visitCall(node, nextScopes)
+    ts.forEachChild(node, (child) => visit(child, nextScopes))
+  }
+
+  visit(sourceFile, [declaredNames(sourceFile)])
+  return { edits, refusals }
+}
+
+export function migrateData(source, filename = 'source.ts') {
+  const chunks = []
+  if (path.extname(filename) === '.vue') {
+    const parsed = parseSfc(source, { filename })
+    if (parsed.errors.length) {
+      return {
+        migrated: source,
+        changes: [],
+        refusals: [
+          {
+            line: 1,
+            message: `could not be parsed as a Vue single-file component (${parsed.errors[0].message}). This file is unchanged.`,
+          },
+        ],
+      }
+    }
+    const { script, scriptSetup } = parsed.descriptor
+    for (const block of [script, scriptSetup]) {
+      if (!block) continue
+      const lang = block.lang === 'tsx' || block.lang === 'jsx' ? 'tsx' : 'ts'
+      chunks.push({
+        text: block.content,
+        offset: block.loc.start.offset,
+        name: `${filename}.${lang}`,
+      })
+    }
+  } else {
+    chunks.push({ text: source, offset: 0, name: filename })
+  }
+
+  const edits = []
+  const refusals = []
+  for (const chunk of chunks) {
+    const result = migrateChunk(chunk.text, chunk.offset, chunk.name, source)
+    edits.push(...result.edits)
+    refusals.push(...result.refusals)
+  }
+
+  if (refusals.length) return { migrated: source, changes: [], refusals }
+  const migrated = [...edits]
+    .sort((a, b) => b.start - a.start)
+    .reduce(
+      (text, edit) => text.slice(0, edit.start) + edit.text + text.slice(edit.end),
+      source,
+    )
+  return { migrated, changes: edits, refusals }
+}
+
+function main() {
+  const args = process.argv.slice(2)
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(USAGE)
+    return
+  }
+  const unknown = args.filter(
+    (arg) => arg.startsWith('-') && arg !== '--dry-run',
+  )
+  const targets = args.filter((arg) => !arg.startsWith('-'))
+  if (unknown.length || !targets.length) {
+    if (unknown.length) console.error(`Unknown option: ${unknown.join(' ')}`)
+    console.error(USAGE)
+    process.exit(1)
+  }
+
+  for (const target of targets) {
+    if (!fs.existsSync(target)) {
+      console.error(`Invalid path: ${target}`)
+      process.exit(1)
+    }
+  }
+
+  const dryRun = args.includes('--dry-run')
+  const files = [...new Set(targets.flatMap((target) => walk(target)))]
+  let changed = 0
+  const refusals = []
+  for (const file of files) {
+    const source = fs.readFileSync(file, 'utf8')
+    const result = migrateData(source, file)
+    if (result.refusals.length) {
+      for (const refusal of result.refusals) refusals.push({ file, ...refusal })
+      continue
+    }
+    if (!result.changes.length) continue
+    changed++
+    if (!dryRun) fs.writeFileSync(file, result.migrated)
+    console.log(`${file} (${result.changes.length})`)
+  }
+  console.log(
+    `\n${dryRun ? '[dry-run] would update' : 'Updated'} ${changed} files`,
+  )
+  if (refusals.length) {
+    console.error(
+      `\nNot converted — ${refusals.length} sites need a decision; affected files were left unchanged:`,
+    )
+    for (const refusal of refusals)
+      console.error(`  ${refusal.file}:L${refusal.line} ${refusal.message}`)
+    process.exit(1)
+  }
+}
+
+const scriptPath = fileURLToPath(import.meta.url)
+const invokedPath = process.argv[1]
+if (invokedPath && fs.realpathSync(invokedPath) === fs.realpathSync(scriptPath))
+  main()

package/src/charts/tokens.ts

@@ -1,6 +1,6 @@
 import { computed, type ComputedRef, type Ref } from 'vue'
 import {
-  resolvedColorScheme,
+  getResolvedColorScheme,
   type ResolvedColorScheme,
 } from '../composables/useColorScheme'
 import { documentAttributes } from './utils'
@@ -207,7 +207,7 @@ function isTransparent(color: string) {
  * lookup so a subtree that redefines `--chart-*` wins over the document root.
  */
 export function resolveChartTokens(el?: HTMLElement | null): ChartTokens {
-  const scheme = resolvedColorScheme()
+  const scheme = getResolvedColorScheme()
   const fallbacks = FALLBACK_TOKENS[scheme]
 
   if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {

package/src/components/Alert/Alert.api.md

@@ -26,7 +26,7 @@
   },
   {
     name: 'icon',
-    description: 'Status icon: unset shows the theme\'s auto icon (gray shows the info glyph in black ink), `false` hides it, a `lucide-*` string or Component renders a custom theme-colored glyph',
+    description: 'Status icon: unset or `true` shows the theme\'s auto icon (gray shows the info glyph in black ink), `false` hides it, a `lucide-*` string or Component renders a custom theme-colored glyph',
     required: false,
     type: 'boolean | string | Component'
   },

package/src/components/Alert/Alert.md

@@ -36,4 +36,40 @@ An info banner with one action and a × button in the corner.
 
 <ComponentPreview name="Alert-ImportProgress" />
 
+## The icon prop
+
+`icon` has three states. Unset or `true` renders the theme's own status glyph
+(gray shows the info glyph in black ink). `false` hides it. A `lucide-*` class
+name or a Vue component renders that glyph instead, in the theme's color.
+
+```vue
+<Alert title="Saved" theme="green" />
+<!-- the theme's auto icon -->
+<Alert title="Saved" theme="green" :icon="true" />
+<!-- the same auto icon, stated -->
+<Alert title="Saved" :icon="false" />
+<!-- no icon -->
+<Alert title="Saved" icon="lucide-rocket" />
+<!-- your own -->
+```
+
+## Styling
+
+The tone is on the root as `data-color`, and the computed layout as
+`data-layout`:
+
+| Hook                                            | Meaning                                    |
+| ----------------------------------------------- | ------------------------------------------- |
+| `[data-color="gray\|blue\|green\|amber\|red"]` | the `theme` prop                           |
+| `[data-layout="row\|banner"]`                   | one line, or the stacked layout            |
+
+`data-color`, not `data-theme`: `data-theme` is the light/dark attribute the
+app sets on the document, and an alert must not look like a theme root.
+
+```css
+:where([data-color='red']) {
+  /* your overrides */
+}
+```
+
 <!-- @include: ./Alert.api.md -->

package/src/components/Alert/types.ts

@@ -30,7 +30,7 @@ export const alertProps = {
   description: { type: String, default: undefined },
   /** Color theme of the status icon and the row action label; the container never changes with theme */
   theme: { type: String as PropType<StatusTheme>, default: 'gray' },
-  /** Status icon: unset shows the theme's auto icon (gray shows the info glyph in black ink), `false` hides it, a `lucide-*` string or Component renders a custom theme-colored glyph */
+  /** Status icon: unset or `true` shows the theme's auto icon (gray shows the info glyph in black ink), `false` hides it, a `lucide-*` string or Component renders a custom theme-colored glyph */
   icon: {
     type: [Boolean, String, Object, Function] as PropType<
       boolean | string | Component

package/src/components/BottomSheet/BottomSheet.md

@@ -37,8 +37,15 @@ starts inside a scrolled list scrolls that list instead of moving the sheet; it
 becomes a drag once the list is back at its top. A drag closes the sheet if it
 passes a distance threshold or ends in a fast flick, and springs back otherwise.
 
-The gesture logic lives in the `useSheetDrag` composable, exported from the
-package root if you need the same behaviour on a surface of your own.
+Put `data-no-sheet-drag` on an element that owns its own horizontal or vertical
+gesture — a carousel, a map, a slider — and a drag starting there never moves
+the sheet:
+
+```vue
+<BottomSheet v-model:open="open">
+  <ImageCarousel data-no-sheet-drag />
+</BottomSheet>
+```
 
 ## Events
 

package/src/components/BottomSheet/BottomSheet.test.ts

@@ -528,6 +528,37 @@ describe('BottomSheet drag to dismiss', () => {
     app.unmount()
   })
 
+  // SHELL-Q9: the opt-out attribute is public and keeps this name.
+  it('leaves a gesture that starts on data-no-sheet-drag alone', async () => {
+    const { sheet, content, app } = await openSheet()
+    const carousel = document.createElement('div')
+    carousel.setAttribute('data-no-sheet-drag', '')
+    content.appendChild(carousel)
+
+    touch('touchstart', carousel, 0, 300)
+    const move = touch('touchmove', carousel, 0, 320)
+
+    expect(move.defaultPrevented).toBe(false)
+    expect(isDragging(sheet)).toBe(false)
+    app.unmount()
+  })
+
+  it('also covers a child of a data-no-sheet-drag element', async () => {
+    const { sheet, content, app } = await openSheet()
+    const carousel = document.createElement('div')
+    carousel.setAttribute('data-no-sheet-drag', '')
+    const slide = document.createElement('div')
+    carousel.appendChild(slide)
+    content.appendChild(carousel)
+
+    touch('touchstart', slide, 0, 300)
+    const move = touch('touchmove', slide, 0, 320)
+
+    expect(move.defaultPrevented).toBe(false)
+    expect(isDragging(sheet)).toBe(false)
+    app.unmount()
+  })
+
   it('drags a sheet that was mounted closed and opened afterwards', async () => {
     const { sheet, content, openUpdates, app } = await openSheet(
       {},

package/src/components/BottomSheet/BottomSheet.vue

@@ -14,6 +14,7 @@
         honest when a mobile URL bar collapses.
       -->
       <DialogContent
+        data-slot="content"
         class="fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-[90dvh] w-full max-w-2xl flex-col rounded-t-[36px] bg-surface-base shadow-lg [corner-shape:squircle] bottom-sheet-content focus:outline-none after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-surface-base"
         :aria-label="title || 'Bottom sheet'"
         @escape-key-down="onDismissAttempt"
@@ -101,9 +102,12 @@ const handleRef = ref<HTMLElement | null>(null)
  * fires exactly once, with the comment, and the gesture is bound to nothing.
  * `handleRef` is a plain element ref, which Vue re-runs every time the content
  * mounts and unmounts, so this re-resolves on every open.
+ *
+ * The query reads the sheet's own `data-slot` hook, the same attribute an app
+ * styles it with. `closest` stops at the nearest match, which is this sheet.
  */
 const sheetEl = computed(
-  () => handleRef.value?.closest<HTMLElement>('.bottom-sheet-content') ?? null,
+  () => handleRef.value?.closest<HTMLElement>('[data-slot="content"]') ?? null,
 )
 
 /*

package/src/components/Breadcrumbs/Breadcrumbs.md

@@ -38,4 +38,20 @@ const items = [
 ]
 ```
 
+An item also carries any extra field you put on it. `BreadcrumbItem` keeps an
+open index signature, so a crumb can hold the record it came from and the
+`#prefix` / `#suffix` slots can read it back:
+
+```vue
+<Breadcrumbs :items="items">
+  <template #prefix="{ item }">
+    <Avatar v-if="item.user" :image="item.user.avatar" size="sm" />
+  </template>
+</Breadcrumbs>
+```
+
+Both slots are named for where they render, not for what goes in them:
+`#prefix` renders before the crumb's label and `#suffix` after it. Each
+receives `{ item }`, and they render for every crumb.
+
 <!-- @include: ./Breadcrumbs.api.md -->

package/src/components/Breadcrumbs/types.ts

@@ -1,11 +1,11 @@
-import { RouterLinkProps } from 'vue-router'
+import type { RouteDestination } from '../shared/route'
 
 export interface BreadcrumbItem {
   /** Text shown for the breadcrumb item */
   label: string
 
   /** Route location used when the item is a link */
-  route?: RouterLinkProps['to']
+  route?: RouteDestination
 
   /** URL used when the item is a plain link, ignored if `route` is set */
   href?: string

package/src/components/Button/Button.api.md

@@ -80,7 +80,7 @@
     name: 'route',
     description: 'Router destination when used as a link',
     required: false,
-    type: 'string | kt | Tt'
+    type: 'RouteDestination'
   },
   {
     name: 'href',