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

package/src/components/Badge/Badge.vue

@@ -1,18 +1,20 @@
 <template>
   <div
-    class="inline-flex select-none items-center gap-1 rounded-full whitespace-nowrap"
+    class="inline-flex select-none items-center gap-1 overflow-clip rounded-full whitespace-nowrap"
     :class="classes"
   >
     <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.prefix"
+      class="inline-flex shrink-0 items-center justify-center"
+      :class="iconSize"
     >
       <slot name="prefix"></slot>
     </div>
     <slot>{{ props.label?.toString() }}</slot>
     <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.suffix"
+      class="inline-flex shrink-0 items-center justify-center"
+      :class="iconSize"
     >
       <slot name="suffix"></slot>
     </div>
@@ -29,56 +31,69 @@ const props = withDefaults(defineProps<BadgeProps>(), {
   variant: 'subtle',
 })
 
-const classes = computed(() => {
-  let solidClasses = {
-    gray: 'text-ink-white bg-surface-gray-7',
-    blue: 'text-ink-blue-1 bg-surface-blue-2',
-    green: 'text-ink-green-1 bg-surface-green-3',
-    orange: 'text-ink-amber-1 bg-surface-amber-2',
-    red: 'text-ink-red-1 bg-surface-red-4',
-  }[props.theme]
-
-  let subtleClasses = {
-    gray: 'text-ink-gray-6 bg-surface-gray-2',
-    blue: 'text-ink-blue-2 bg-surface-blue-2',
-    green: 'text-ink-green-3 bg-surface-green-2',
-    orange: 'text-ink-amber-3 bg-surface-amber-1',
-    red: 'text-ink-red-4 bg-surface-red-2',
-  }[props.theme]
-
-  let outlineClasses = {
-    gray: 'text-ink-gray-6 bg-transparent border border-outline-gray-1',
-    blue: 'text-ink-blue-2 bg-transparent border border-outline-blue-1',
-    green: 'text-ink-green-3 bg-transparent border border-outline-green-2',
-    orange: 'text-ink-amber-3 bg-transparent border border-outline-amber-2',
-    red: 'text-ink-red-4 bg-transparent border border-outline-red-2',
-  }[props.theme]
+// `orange` is kept as a deprecated alias for `amber`
+const theme = computed(() => (props.theme === 'orange' ? 'amber' : props.theme))
 
-  let ghostClasses = {
-    gray: 'text-ink-gray-6 bg-transparent',
-    blue: 'text-ink-blue-2 bg-transparent',
-    green: 'text-ink-green-3 bg-transparent',
-    orange: 'text-ink-amber-3 bg-transparent',
-    red: 'text-ink-red-4 bg-transparent',
-  }[props.theme]
+const classes = computed(() => {
+  // The semantic scale (Figma export → tailwind/generated/colors.json) is
+  // consistent across all themes — gray is the only exception (`-7` is its
+  // saturated step, since gray needs more headroom). Tailwind's JIT needs
+  // literal class names so the per-theme strings are inlined below.
+  //   surface/{color}-2  pale bg          surface/{color}-5  saturated bg
+  //   outline/{color}-2  pale border
+  //   ink/{color}-1      pale text        ink/{color}-4      saturated text
+  const themeClasses = {
+    gray: {
+      solid: 'text-ink-base bg-surface-gray-10',
+      subtle: 'text-ink-gray-6 bg-surface-gray-2',
+      outline: 'text-ink-gray-6 border border-outline-gray-2',
+      ghost: 'text-ink-gray-6',
+    },
+    blue: {
+      solid: 'text-ink-blue-1 bg-surface-blue-7',
+      subtle: 'text-ink-blue-8 bg-surface-blue-2',
+      outline: 'text-ink-blue-8 border border-outline-blue-3',
+      ghost: 'text-ink-blue-8',
+    },
+    green: {
+      solid: 'text-ink-green-1 bg-surface-green-7',
+      subtle: 'text-ink-green-8 bg-surface-green-2',
+      outline: 'text-ink-green-8 border border-outline-green-3',
+      ghost: 'text-ink-green-8',
+    },
+    amber: {
+      solid: 'text-ink-amber-1 bg-surface-amber-7',
+      subtle: 'text-ink-amber-8 bg-surface-amber-2',
+      outline: 'text-ink-amber-8 border border-outline-amber-3',
+      ghost: 'text-ink-amber-8',
+    },
+    red: {
+      solid: 'text-ink-red-1 bg-surface-red-7',
+      subtle: 'text-ink-red-8 bg-surface-red-2',
+      outline: 'text-ink-red-8 border border-outline-red-3',
+      ghost: 'text-ink-red-8',
+    },
+    violet: {
+      solid: 'text-ink-violet-1 bg-surface-violet-7',
+      subtle: 'text-ink-violet-8 bg-surface-violet-2',
+      outline: 'text-ink-violet-8 border border-outline-violet-3',
+      ghost: 'text-ink-violet-8',
+    },
+  }[theme.value]
 
-  let variantClasses = {
-    subtle: subtleClasses,
-    solid: solidClasses,
-    outline: outlineClasses,
-    ghost: ghostClasses,
-  }[props.variant]
+  const variantClasses = themeClasses[props.variant]
 
-  let sizeClasses = {
-    sm: 'h-4 text-xs px-1.5',
-    md: 'h-5 text-xs px-1.5',
-    lg: 'h-6 text-sm px-2',
-		xl: 'h-7 text-base px-2',
+  const sizeClasses = {
+    sm: 'h-4 px-1.5 text-xs',
+    md: 'h-5 px-1.5 text-xs',
+    lg: 'h-6 px-2 text-[13px] tracking-[0.02em]',
   }[props.size]
 
   return [variantClasses, sizeClasses]
 })
 
+const iconSize = computed(() => (props.size === 'lg' ? 'size-3' : 'size-2.5'))
+
 defineSlots<{
   /** Content shown before the badge label */
   prefix?: () => any

package/src/components/Badge/stories/CallMeta.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="w-[28rem]">
+    <p class="mb-2 text-base-medium text-ink-gray-8">Outbound Call</p>
+    <div class="flex flex-wrap items-center gap-1.5">
+      <Badge>
+        <template #prefix>
+          <span class="lucide-calendar" aria-hidden="true" />
+        </template>
+        May 16, Friday
+      </Badge>
+      <Badge>
+        <template #prefix>
+          <span class="lucide-timer" aria-hidden="true" />
+        </template>
+        32:48
+      </Badge>
+      <Badge>
+        <template #prefix>
+          <span class="lucide-play" aria-hidden="true" />
+        </template>
+        Listen
+      </Badge>
+      <Badge>
+        <template #prefix>
+          <span class="lucide-sticky-note" aria-hidden="true" />
+        </template>
+        Note
+      </Badge>
+    </div>
+  </div>
+</template>

package/src/components/Badge/stories/EventStatus.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="w-96 rounded-r-md border-l-2 border-outline-gray-3 px-3 py-2 transition-colors hover:bg-surface-gray-1">
+    <Badge theme="red" size="md">
+      <template #prefix>
+        <span class="lucide-mail" aria-hidden="true" />
+      </template>
+      Awaiting response
+    </Badge>
+    <p class="mt-2 text-base-medium leading-relaxed text-ink-gray-8">Supply Chain Sync</p>
+    <p class="text-sm leading-relaxed text-ink-gray-6">2:30 PM - 3:00 PM</p>
+  </div>
+</template>

package/src/components/Badge/stories/ListStatus.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+
+const leads = [
+  {
+    name: 'Acme Corp',
+    owner: 'Jane Cooper',
+    status: 'Qualified',
+    theme: 'green',
+    dotClass: 'bg-surface-green-7',
+    value: '$24.5k',
+  },
+  {
+    name: 'Globex',
+    owner: 'Sammy Well',
+    status: 'In Progress',
+    theme: 'blue',
+    dotClass: 'bg-surface-blue-7',
+    value: '$18.2k',
+  },
+  {
+    name: 'Initech',
+    owner: 'Brian Robinson',
+    status: 'On Hold',
+    theme: 'amber',
+    dotClass: 'bg-surface-amber-7',
+    value: '$9.8k',
+  },
+  {
+    name: 'Soylent',
+    owner: 'Matt Clinton',
+    status: 'Lost',
+    theme: 'red',
+    dotClass: 'bg-surface-red-7',
+    value: '$4.1k',
+  },
+  {
+    name: 'Umbrella',
+    owner: 'Jane Cooper',
+    status: 'New',
+    theme: 'gray',
+    dotClass: 'bg-surface-gray-8',
+    value: '$12.0k',
+  },
+]
+</script>
+
+<template>
+  <div
+    class="w-full max-w-[640px] overflow-hidden rounded-lg border border-outline-gray-1 bg-surface-base shadow-sm"
+  >
+    <div class="flex items-center justify-between border-b border-outline-gray-1 px-3 py-2.5">
+      <h3 class="m-0 text-base-medium text-ink-gray-8">Lead pipeline</h3>
+      <Badge theme="gray" variant="outline">5 leads</Badge>
+    </div>
+
+    <div
+      class="grid grid-cols-[minmax(0,1fr)_7.5rem_6.5rem_5rem] gap-3 border-b border-outline-gray-1 bg-surface-gray-1 px-3 py-1.5 text-sm-medium text-ink-gray-5"
+    >
+      <span>Company</span>
+      <span>Owner</span>
+      <span>Status</span>
+      <span>Value</span>
+    </div>
+
+    <div class="divide-y divide-outline-gray-1">
+      <div
+        v-for="lead in leads"
+        :key="lead.name"
+        class="grid grid-cols-[minmax(0,1fr)_7.5rem_6.5rem_5rem] items-center gap-3 px-3 py-2 transition-colors hover:bg-surface-gray-1"
+      >
+        <div class="flex min-w-0 items-center gap-2">
+          <div
+            class="flex size-6 shrink-0 items-center justify-center rounded bg-surface-gray-2 text-xs-medium text-ink-gray-6"
+          >
+            {{ lead.name.slice(0, 1) }}
+          </div>
+          <span class="truncate text-sm text-ink-gray-8">{{ lead.name }}</span>
+        </div>
+        <span class="truncate text-sm text-ink-gray-6">{{ lead.owner }}</span>
+        <Badge :theme="lead.theme" class="justify-self-start">
+          <template #prefix>
+            <span class="size-1 rounded-full" :class="lead.dotClass" />
+          </template>
+          {{ lead.status }}
+        </Badge>
+        <span class="text-sm-medium text-ink-gray-7">{{ lead.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Badge/stories/Reactions.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+
+const reactions = [
+  { emoji: '😄', count: 12 },
+  { emoji: '🍩', count: 8 },
+  { emoji: '🔥', count: 7 },
+]
+</script>
+
+<template>
+  <div class="w-[28rem]">
+    <p class="text-base text-ink-gray-8">
+      The words breathing and ventilation are hyponyms, not synonyms, of
+      respiration.
+    </p>
+    <div class="mt-2 flex items-center gap-1.5">
+      <Badge v-for="r in reactions" :key="r.emoji" size="md">
+        <template #prefix>
+          <span class="text-sm leading-none">{{ r.emoji }}</span>
+        </template>
+        {{ r.count }}
+      </Badge>
+      <button
+        type="button"
+        class="inline-flex h-5 items-center justify-center rounded-full px-1.5 text-ink-gray-5 hover:bg-surface-gray-2"
+        aria-label="Add reaction"
+      >
+        <span class="lucide-smile-plus size-3.5" aria-hidden="true" />
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/Badge/stories/RowTags.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex w-full max-w-[640px] flex-col divide-y divide-outline-gray-1">
+    <div class="flex items-center gap-3 py-2.5">
+      <span class="lucide-circle size-4 text-ink-gray-4" aria-hidden="true" />
+      <span class="flex-1 text-base text-ink-gray-8">
+        Hyper-verge landing page
+      </span>
+      <div class="flex items-center gap-1.5">
+        <Badge theme="green">App</Badge>
+        <Badge theme="amber">Frappe</Badge>
+        <Badge>+2</Badge>
+      </div>
+      <Badge theme="red">
+        <template #prefix>
+          <span class="lucide-calendar" aria-hidden="true" />
+        </template>
+        23 Feb
+      </Badge>
+    </div>
+    <div class="flex items-center gap-3 py-2.5">
+      <span class="lucide-circle size-4 text-ink-gray-4" aria-hidden="true" />
+      <span class="flex-1 text-base text-ink-gray-8">Client feedback</span>
+      <div class="flex items-center gap-1.5">
+        <Badge theme="red">Opensource</Badge>
+        <Badge>+3</Badge>
+      </div>
+      <Badge theme="red">
+        <template #prefix>
+          <span class="lucide-calendar" aria-hidden="true" />
+        </template>
+        28 Feb
+      </Badge>
+    </div>
+  </div>
+</template>

package/src/components/Badge/types.ts

@@ -4,7 +4,7 @@ interface Label {
 
 export interface BadgeProps {
   /** Visual color theme of the badge */
-  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
+  theme?: 'gray' | 'blue' | 'green' | 'amber' | 'red' | 'violet' | 'orange'
 
   /** Controls the size of the badge */
   size?: 'sm' | 'md' | 'lg'
@@ -15,4 +15,3 @@ export interface BadgeProps {
   /** Content displayed inside the badge */
   label?: Label | string | number
 }
-

package/src/components/BottomSheet/BottomSheet.api.md

@@ -0,0 +1,57 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const propsData = [
+  {
+    name: 'open',
+    description: 'Controls whether the sheet is open (`v-model:open`).',
+    required: false,
+    type: 'boolean'
+  },
+  {
+    name: 'title',
+    description: 'Optional centered title rendered in the drag-handle area.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'dismissible',
+    description: 'Allow outside-click, Escape, and swipe-down to close. Default `true`.',
+    required: false,
+    type: 'boolean',
+    default: 'true'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:open',
+    description: 'Fired when the open state changes.',
+    type: '[value: boolean]'
+  },
+  {
+    name: 'after-leave',
+    description: '',
+    type: '[]'
+  }
+]
+</script>
+
+## API Reference
+
+<PropsTable name="BottomSheet" :data="propsData"/>
+
+<SlotsTable :data="slotsData"/>
+
+<EmitsTable :data="emitsData"/>

package/src/components/BottomSheet/BottomSheet.vue

@@ -0,0 +1,232 @@
+<template>
+  <DialogRoot v-model:open="isOpen">
+    <DialogPortal>
+      <DialogOverlay
+        class="fixed inset-0 z-50 bg-black-overlay-200 dark:bg-black-overlay-700 bottom-sheet-overlay outline-none"
+        @after-leave="emit('after-leave')"
+      />
+      <DialogContent
+        class="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-2xl transform-gpu 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"
+        :style="dragStyle"
+        :aria-label="title || 'Bottom sheet'"
+        @escape-key-down="onDismissAttempt"
+        @interact-outside="onDismissAttempt"
+        @open-auto-focus="(e: Event) => e.preventDefault()"
+      >
+        <div
+          ref="handleRef"
+          class="cursor-grab touch-none select-none active:cursor-grabbing"
+        >
+          <div class="flex justify-center pb-2 pt-3">
+            <div class="h-1.5 w-10 rounded-full bg-surface-gray-3" />
+          </div>
+          <DialogTitle
+            v-if="title"
+            class="px-2 pb-3 pt-2 text-center text-3xl-semibold text-ink-gray-9"
+          >
+            {{ title }}
+          </DialogTitle>
+        </div>
+        <div class="h-[70vh] overflow-y-auto">
+          <slot />
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import {
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+} from 'reka-ui'
+import { usePointerSwipe } from '@vueuse/core'
+import type { BottomSheetProps, BottomSheetEmits } from './types'
+
+const props = withDefaults(defineProps<BottomSheetProps>(), {
+  dismissible: true,
+})
+const emit = defineEmits<BottomSheetEmits>()
+
+const isOpen = computed({
+  get: () => props.open || false,
+  set(value: boolean) {
+    emit('update:open', value)
+  },
+})
+
+function onDismissAttempt(event: Event) {
+  if (!props.dismissible) event.preventDefault()
+}
+
+// Swipe-down-to-dismiss on the handle. While dragging we translate the sheet
+// 1:1 with the pointer (transition off). On release we either fling it shut
+// *from the release point* or spring it back to rest.
+const handleRef = ref<HTMLElement | null>(null)
+const dragY = ref(0)
+const dragging = ref(false)
+const closing = ref(false)
+
+// Dismiss when the drag passes this fraction of the sheet's own height...
+const CLOSE_HEIGHT_RATIO = 0.25
+// ...or when released with at least this downward speed (px per ms) — a flick.
+const CLOSE_VELOCITY = 0.5
+const CLOSE_DURATION = 260
+
+// Recent (offset, timestamp) samples during a drag, for release-velocity.
+let samples: { y: number; t: number }[] = []
+// Sheet height captured at drag start — drives both the rubber-band and the
+// height-relative close threshold without re-measuring on every move.
+let dragHeight = 0
+
+/**
+ * iOS-style resistance for the upward overscroll: the further you pull past the
+ * resting position, the less the sheet follows, asymptotically. `overscroll` is
+ * a positive distance; returns the (negative) damped offset.
+ */
+function rubberband(overscroll: number, dimension: number, constant = 0.55) {
+  const d = dimension || window.innerHeight
+  return -((overscroll * d * constant) / (d + constant * overscroll))
+}
+
+/** Downward speed (px/ms) over the last ~100ms of the drag; positive = down. */
+function flickVelocity() {
+  if (samples.length < 2) return 0
+  const latest = samples[samples.length - 1]
+  const oldest = samples.find((s) => latest.t - s.t <= 100) ?? samples[0]
+  const dt = latest.t - oldest.t
+  return dt > 0 ? (latest.y - oldest.y) / dt : 0
+}
+
+const dragStyle = computed(() => {
+  // Fling shut: keep sliding down from the current offset and off-screen.
+  // `animation: none` suppresses reka's exit keyframe so it can't restart the
+  // slide from translateY(0) — which is what caused the "jump back up" flash.
+  if (closing.value) {
+    return {
+      transform: 'translateY(100%)',
+      transition: `transform ${CLOSE_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`,
+      animation: 'none',
+    }
+  }
+  // Live drag: track the pointer with no transition.
+  if (dragging.value) {
+    return { transform: `translateY(${dragY.value}px)`, transition: 'none' }
+  }
+  // Rest / spring-back.
+  return {
+    transform: dragY.value ? `translateY(${dragY.value}px)` : undefined,
+    transition: 'transform 200ms ease-out',
+  }
+})
+
+const { distanceY, direction } = usePointerSwipe(handleRef, {
+  // Accept mouse and pen as well as touch, so the handle is draggable on desktop.
+  pointerTypes: ['mouse', 'touch', 'pen'],
+  // Track from the first pixel — the default 50px threshold makes the sheet sit
+  // still, then jump 50px once crossed, which reads as choppy.
+  threshold: 0,
+  onSwipeStart() {
+    samples = []
+    dragHeight =
+      handleRef.value?.closest<HTMLElement>('.bottom-sheet-content')
+        ?.offsetHeight ?? window.innerHeight
+  },
+  onSwipe() {
+    if (!props.dismissible || closing.value) return
+    dragging.value = true
+    // distanceY is start.y - current.y, so -distanceY is +down / -up.
+    // Down tracks 1:1; up gets rubber-band resistance and springs back on release.
+    const raw = -distanceY.value
+    dragY.value = raw >= 0 ? raw : rubberband(-raw, dragHeight)
+    samples.push({ y: dragY.value, t: performance.now() })
+  },
+  onSwipeEnd() {
+    if (!props.dismissible || closing.value) return
+    dragging.value = false
+    // Close on either a long-enough downward pull (relative to the sheet's
+    // height) or a fast downward flick; anything else (incl. an upward pull)
+    // springs back to rest.
+    const draggedDown = direction.value === 'down' && dragY.value > 0
+    const shouldClose =
+      draggedDown &&
+      (dragY.value > dragHeight * CLOSE_HEIGHT_RATIO ||
+        flickVelocity() > CLOSE_VELOCITY)
+    if (shouldClose) {
+      // Animate the fling, then unmount. `closing` stays true through the
+      // unmount so reka drops the node without replaying its own exit.
+      closing.value = true
+      window.setTimeout(() => (isOpen.value = false), CLOSE_DURATION + 20)
+    } else {
+      dragY.value = 0
+    }
+  },
+})
+
+// Fresh drag state each time the sheet opens.
+watch(isOpen, (open) => {
+  if (open) {
+    closing.value = false
+    dragY.value = 0
+  }
+})
+</script>
+
+<style scoped>
+@keyframes bottom-sheet-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bottom-sheet-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes bottom-sheet-content-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes bottom-sheet-content-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+:global(.bottom-sheet-overlay[data-state='open']) {
+  animation: bottom-sheet-overlay-in 150ms ease-out;
+}
+
+:global(.bottom-sheet-overlay[data-state='closed']) {
+  animation: bottom-sheet-overlay-out 200ms ease-in;
+}
+
+/* iOS-style sheet easing (fast-out, settle-in) — a spring feel without a lib. */
+:global(.bottom-sheet-content[data-state='open']) {
+  animation: bottom-sheet-content-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+:global(.bottom-sheet-content[data-state='closed']) {
+  animation: bottom-sheet-content-out 200ms ease-in;
+}
+</style>

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,6 @@
+export { default as BottomSheet } from './BottomSheet.vue'
+export type {
+  BottomSheetProps,
+  BottomSheetEmits,
+  BottomSheetSlots,
+} from './types'

package/src/components/BottomSheet/types.ts

@@ -0,0 +1,23 @@
+export interface BottomSheetProps {
+  /** Controls whether the sheet is open (`v-model:open`). */
+  open?: boolean
+
+  /** Optional centered title rendered in the drag-handle area. */
+  title?: string
+
+  /** Allow outside-click, Escape, and swipe-down to close. Default `true`. */
+  dismissible?: boolean
+}
+
+export interface BottomSheetEmits {
+  /** Fired when the open state changes via `v-model:open`. */
+  'update:open': [value: boolean]
+
+  /** Fired after the close animation finishes. */
+  'after-leave': []
+}
+
+export interface BottomSheetSlots {
+  /** Sheet body, rendered in a scrollable region below the handle. */
+  default?: () => any
+}