@hina-ui/vue 1.7.2 → 1.7.4

package/src/components/qr-code/export.ts

@@ -0,0 +1,65 @@
+import type { QRCodeExportOptions } from './types'
+
+function dataURL(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(blob)
+  })
+}
+
+export async function exportQRCode(
+  svg: SVGSVGElement,
+  size: number,
+  { type = 'image/png', scale = 2 }: QRCodeExportOptions = {},
+): Promise<Blob> {
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  const source = [svg, ...svg.querySelectorAll('*')]
+  const target = [clone, ...clone.querySelectorAll('*')]
+  target.forEach((el, index) => {
+    const style = getComputedStyle(source[index]!)
+    el.removeAttribute('class')
+    el.removeAttribute('style')
+    el.setAttribute('fill', style.fill)
+  })
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  clone.setAttribute('width', String(size))
+  clone.setAttribute('height', String(size))
+  for (const image of clone.querySelectorAll('image')) {
+    const href = image.getAttribute('href')
+    if (!href) continue
+    let embedded = href
+    if (!href.startsWith('data:')) {
+      const response = await fetch(new URL(href, svg.ownerDocument.baseURI))
+      if (!response.ok) throw new Error('Unable to export the QR code logo')
+      embedded = await dataURL(await response.blob())
+    }
+    const decoded = new Image()
+    decoded.src = embedded
+    await decoded.decode()
+    image.setAttribute('href', embedded)
+  }
+  const blob = new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml' })
+  if (type === 'image/svg+xml') return blob
+  const url = URL.createObjectURL(blob)
+  try {
+    const image = new Image()
+    image.src = url
+    await image.decode()
+    const factor = Number.isFinite(scale) ? Math.max(1, Math.min(8, scale)) : 2
+    const canvas = svg.ownerDocument.createElement('canvas')
+    canvas.width = canvas.height = Math.min(8192, Math.round(size * factor))
+    const context = canvas.getContext('2d')
+    if (!context) throw new Error('Canvas is unavailable')
+    context.drawImage(image, 0, 0, canvas.width, canvas.height)
+    return await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob(
+        result => (result ? resolve(result) : reject(new Error('Unable to export the QR code'))),
+        'image/png',
+      )
+    })
+  } finally {
+    URL.revokeObjectURL(url)
+  }
+}

package/src/components/qr-code/qr-code.variants.ts

@@ -0,0 +1 @@
+export { qrCode, qrCodeSvg, qrCodeStatus } from '../../../../shared/src/variants/qr-code'

package/src/components/qr-code/types.ts

@@ -0,0 +1,35 @@
+import type { QRCodeLevel } from '../../../../shared/src/lib/qr-code'
+export type { QRCodeLevel }
+
+export type QRCodeStatus = 'active' | 'loading' | 'expired' | 'scanned'
+export type QRCodeState = QRCodeStatus | 'empty' | 'error'
+
+export interface QRCodeProps {
+  value: string
+  label?: string
+  size?: number
+  level?: QRCodeLevel
+  margin?: number
+  color?: string
+  background?: string
+  bordered?: boolean
+  logo?: string
+  logoSize?: number
+  logoMargin?: number
+  status?: QRCodeStatus
+  class?: string
+}
+export interface QRCodeStatusSlot {
+  status: Exclude<QRCodeState, 'active'>
+  error: Error | undefined
+  refresh: () => void
+}
+export interface QRCodeExportOptions {
+  type?: 'image/svg+xml' | 'image/png'
+  scale?: number
+}
+export interface QRCodeExpose {
+  element: HTMLElement | undefined
+  svg: SVGSVGElement | undefined
+  toBlob: (options?: QRCodeExportOptions) => Promise<Blob>
+}

package/src/components/radio-group/radio-group.variants.ts

@@ -1,5 +1 @@
-import { tv } from '../../lib/tv'
-
-export const radioDot = tv({
-  base: 'block size-[calc(var(--hn-checkbox-size)/2)] bg-surface rounded-full',
-})
+export * from '../../../../shared/src/variants/radio-group'

package/src/components/range-calendar/range-calendar.variants.ts

@@ -1,24 +1 @@
-import { tv } from '../../lib/tv'
-import { calendarCell, calendarDay } from '../calendar/calendar.variants'
-
-export const rangeCalendarCell = tv({
-  extend: calendarCell,
-  base: [
-    'first:rounded-s-md last:rounded-e-md',
-    'has-[[data-selected]]:bg-accent-soft has-[[data-highlighted]]:bg-accent-soft',
-    'has-[[data-selection-start]]:rounded-s-md has-[[data-highlighted-start]]:rounded-s-md',
-    'has-[[data-selection-end]]:rounded-e-md has-[[data-highlighted-end]]:rounded-e-md',
-  ],
-})
-
-export const rangeCalendarDay = tv({
-  extend: calendarDay,
-  base: [
-    'data-[highlighted]:text-accent-text',
-    'data-[highlighted]:not-[[data-highlighted-end]]:[--hn-state-hover-opacity:0]',
-    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:bg-transparent',
-    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:text-accent-text',
-    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:font-normal',
-    'data-[selected]:[--hn-state-selected-opacity:0]',
-  ],
-})
+export * from '../../../../shared/src/variants/range-calendar'

package/src/components/rating/Rating.vue

@@ -2,6 +2,7 @@
   import { RatingItem, RatingItemIndicator, RatingRoot } from 'reka-ui'
   import { Star } from '@lucide/vue'
   import { cn } from '../../lib/cn'
+  import { rekaRatingStepStyle } from '../../lib/reka/styles'
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import {
@@ -13,12 +14,14 @@
     type RatingVariants,
   } from './rating.variants'
   import { starFill } from './utils/fill'
+  import { useRatingScale } from './composables/useRatingScale'
 
   defineOptions({ name: 'HnRating', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
       max?: number
+      stars?: number
       step?: 1 | 0.5
       clearable?: boolean
       readonly?: boolean
@@ -31,6 +34,11 @@
   )
 
   const model = defineModel<number>({ default: 0 })
+  const { count, scaled, value, toScore } = useRatingScale(
+    model,
+    () => props.max,
+    () => props.stars,
+  )
 
   const t = useUiLocale()
 
@@ -46,12 +54,12 @@
     data-hn-rating
     data-readonly
     role="img"
-    :aria-label="t.rating.label(model, props.max)"
+    :aria-label="scaled ? t.rating.score(model, props.max) : t.rating.label(model, props.max)"
     :class="cn(ratingRoot({ size: props.size }), props.class)"
   >
-    <span v-for="index in props.max" :key="index" :class="ratingItem()">
+    <span v-for="index in count" :key="index" :class="ratingItem()">
       <Star :class="ratingStar()" />
-      <span :class="ratingFill()" :style="{ width: starFill(model, index) }">
+      <span :class="ratingFill()" :style="{ width: starFill(value, index) }">
         <Star :class="ratingStar({ active: true })" />
       </span>
     </span>
@@ -66,15 +74,14 @@
     :aria-labelledby="labelledBy"
     :aria-describedby="describedBy"
     :aria-invalid="invalid || undefined"
-    :model-value="model"
-    :length="props.max"
+    v-model="value"
+    :length="count"
     :step="props.step"
     :clearable="props.clearable"
     hoverable
     :disabled="disabled"
-    :name="props.name"
+    :name="scaled ? undefined : props.name"
     :class="cn(ratingRoot({ size: props.size }), props.class)"
-    @update:model-value="model = $event"
   >
     <RatingItem
       v-for="item in items"
@@ -87,11 +94,20 @@
         v-for="step in steps"
         :key="step"
         :step="step"
-        :aria-label="t.rating.star(step)"
+        :aria-label="scaled ? t.rating.score(toScore(step), props.max) : t.rating.star(step)"
         :class="ratingStep()"
+        :style="rekaRatingStepStyle"
       >
         <Star :class="ratingStar()" />
       </RatingItemIndicator>
     </RatingItem>
+    <input
+      v-if="scaled && props.name"
+      type="hidden"
+      :name="props.name"
+      :value="model"
+      :disabled="disabled"
+      :form="$attrs.form as string | undefined"
+    />
   </RatingRoot>
 </template>

package/src/components/rating/composables/useRatingScale.ts

@@ -0,0 +1,24 @@
+import { computed, type Ref } from 'vue'
+
+export function useRatingScale(
+  model: Ref<number>,
+  max: () => number,
+  stars: () => number | undefined,
+) {
+  const count = computed(() => stars() ?? max())
+  const scaled = computed(() => count.value !== max())
+
+  function toScore(value: number) {
+    return scaled.value ? Number(((value / count.value) * max()).toPrecision(15)) : value
+  }
+
+  const value = computed({
+    get: () =>
+      scaled.value ? Number(((model.value / max()) * count.value).toFixed(10)) : model.value,
+    set: (value: number) => {
+      model.value = toScore(value)
+    },
+  })
+
+  return { count, scaled, value, toScore }
+}

package/src/components/rating/rating.variants.ts

@@ -1,46 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const ratingRoot = tv({
-  base: 'inline-flex items-center gap-0.5 data-disabled:pointer-events-none data-disabled:opacity-50',
-  variants: {
-    size: {
-      sm: '[--hn-rating-size:--spacing(4)]',
-      md: '[--hn-rating-size:--spacing(5)]',
-      lg: '[--hn-rating-size:--spacing(6)]',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const ratingItem = tv({
-  base: [
-    'relative inline-flex size-[var(--hn-rating-size)] shrink-0 rounded-xs',
-    'has-[:focus-visible]:[outline:var(--hn-focus-ring-width)_solid_var(--hn-focus-ring)] has-[:focus-visible]:[outline-offset:var(--hn-focus-ring-offset)]',
-  ],
-})
-
-export const ratingStep = tv({
-  base: [
-    'group/hn-rating-step absolute inset-y-0 start-0 cursor-pointer overflow-hidden outline-none',
-    '[width:var(--reka-rating-item-step-width)] [opacity:var(--reka-rating-item-step-opacity)] [z-index:var(--reka-rating-item-step-z-index)]',
-    'disabled:cursor-not-allowed',
-  ],
-})
-
-export const ratingStar = tv({
-  base: 'text-line-strong size-[var(--hn-rating-size)] shrink-0 fill-transparent transition-[color,fill] duration-(--hn-duration-fast) ease-(--hn-ease-enter)',
-  variants: {
-    active: {
-      true: 'text-warning fill-current',
-      false:
-        'group-data-[state=active]/hn-rating-step:text-warning group-data-[state=active]/hn-rating-step:fill-current',
-    },
-  },
-  defaultVariants: { active: false },
-})
-
-export const ratingFill = tv({
-  base: 'absolute inset-y-0 start-0 overflow-hidden',
-})
-
-export type RatingVariants = VariantProps<typeof ratingRoot>
+export * from '../../../../shared/src/variants/rating'

package/src/components/result/result.variants.ts

@@ -1,24 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const resultIcon = tv({
-  base: 'flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',
-  variants: {
-    status: {
-      success: 'bg-success-soft text-success-text',
-      error: 'bg-danger-soft text-danger-text',
-      warning: 'bg-warning-soft text-warning-text',
-      info: 'bg-info-soft text-info-text',
-    },
-    size: {
-      sm: 'size-12 [&_svg]:size-6',
-      md: 'size-14 [&_svg]:size-7',
-      lg: 'size-18 [&_svg]:size-9',
-    },
-  },
-  defaultVariants: {
-    status: 'info',
-    size: 'md',
-  },
-})
-
-export type ResultVariants = VariantProps<typeof resultIcon>
+export * from '../../../../shared/src/variants/result'

package/src/components/ring-progress/ring-progress.variants.ts

@@ -1,55 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const ringProgress = tv({
-  base: 'inline-flex flex-col items-center gap-1.5',
-})
-
-export const ringProgressRoot = tv({
-  base: 'relative shrink-0',
-  variants: {
-    size: {
-      sm: 'size-10 text-xs',
-      md: 'size-16 text-sm',
-      lg: 'size-24 text-lg',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export const ringProgressSvg = tv({
-  base: 'hn-ring-spin size-full -rotate-90',
-})
-
-export const ringProgressTrack = tv({
-  base: 'stroke-line-strong fill-none',
-})
-
-export const ringProgressArc = tv({
-  base: 'hn-ring-arc fill-none',
-  variants: {
-    tone: {
-      accent: 'stroke-accent',
-      neutral: 'stroke-neutral-solid',
-      success: 'stroke-success',
-      warning: 'stroke-warning',
-      danger: 'stroke-danger',
-      info: 'stroke-info',
-    },
-  },
-  defaultVariants: {
-    tone: 'accent',
-  },
-})
-
-export const ringProgressCenter = tv({
-  base: 'text-fg absolute inset-0 flex items-center justify-center tabular-nums',
-})
-
-export const ringProgressLabel = tv({
-  base: 'text-muted text-sm',
-})
-
-export type RingProgressVariants = VariantProps<typeof ringProgressRoot> &
-  VariantProps<typeof ringProgressArc>
+export * from '../../../../shared/src/variants/ring-progress'

package/src/components/scroll-area/ScrollArea.vue

@@ -13,6 +13,7 @@
   const props = withDefaults(
     defineProps<{
       direction?: 'vertical' | 'horizontal' | 'both'
+      dir?: 'ltr' | 'rtl' | 'auto'
       autoHide?: 'never' | 'scroll' | 'leave' | 'move'
       scrollbar?: boolean
       wheelRedirect?: boolean
@@ -51,10 +52,7 @@
       },
       overflow: overflow[props.direction],
       update: {
-        elementEvents: [
-          ['img', 'load'],
-          ['*', 'transitionend animationend'],
-        ] as Array<[string, string]>,
+        elementEvents: [['img', 'load']] as Array<[string, string]>,
       },
     }
   }
@@ -85,12 +83,15 @@
 </script>
 
 <template>
-  <div :class="cn('hn-scroll-area relative flex flex-col overflow-hidden', props.class)">
+  <div
+    :dir="props.dir"
+    :class="cn('hn-scroll-area relative grid grid-cols-1 grid-rows-1 overflow-hidden', props.class)"
+  >
     <div
       ref="host"
       v-bind="{ ...$attrs, ...hostFocus }"
       data-overlayscrollbars-initialize
-      class="w-full min-h-0 grow"
+      class="min-h-0 w-full"
     >
       <div ref="content" v-bind="viewportFocus" data-overlayscrollbars-contents>
         <slot />

package/src/components/scroll-area/composables/useOverlayScrollbars.ts

@@ -1,4 +1,6 @@
-import { onBeforeUnmount, onMounted, shallowRef, type ShallowRef } from 'vue'
+import { onBeforeUnmount, onMounted, shallowRef, watch, type ShallowRef } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { useLayoutTransition } from '../../../lib/layout-stability'
 import {
   OverlayScrollbars,
   type OverlayScrollbars as OSInstance,
@@ -7,40 +9,6 @@ import {
 
 type OSEvent = 'scroll' | 'updated'
 
-type IdleRequest = (callback: () => void, options?: { timeout: number }) => number
-
-function idleScheduler(): [(task: () => void) => void, () => void] {
-  if (typeof window === 'undefined') {
-    const noop = () => {}
-    return [noop, noop]
-  }
-  const hasIdle = typeof window.requestIdleCallback === 'function'
-  const request: IdleRequest = hasIdle ? window.requestIdleCallback : window.requestAnimationFrame
-  const cancelRequest = hasIdle ? window.cancelIdleCallback : window.cancelAnimationFrame
-  let requestId: number | undefined
-  let frameId: number | undefined
-
-  const cancel = () => {
-    if (requestId !== undefined) cancelRequest(requestId)
-    if (frameId !== undefined) cancelAnimationFrame(frameId)
-    requestId = undefined
-    frameId = undefined
-  }
-  const schedule = (task: () => void) => {
-    cancel()
-    requestId = request(
-      hasIdle
-        ? () => {
-            cancel()
-            frameId = requestAnimationFrame(task)
-          }
-        : task,
-      { timeout: 2233 },
-    )
-  }
-  return [schedule, cancel]
-}
-
 export function useOverlayScrollbars(
   host: ShallowRef<HTMLElement | undefined>,
   content: ShallowRef<HTMLElement | undefined>,
@@ -49,37 +17,38 @@ export function useOverlayScrollbars(
   const viewport = shallowRef<HTMLElement>()
   const instance = shallowRef<OSInstance>()
   const listeners: Array<[OSEvent, () => void]> = []
-  const [schedule, cancelSchedule] = idleScheduler()
-
-  let lastGesture = Number.NEGATIVE_INFINITY
-  let retryId: ReturnType<typeof setTimeout> | undefined
-
-  const markGesture = () => {
-    lastGesture = performance.now()
-  }
+  let frameId: number | undefined
+  const transitioning = useLayoutTransition()
+  let paused: OSInstance | undefined
+  const stop = watch(
+    [instance, () => transitioning?.value],
+    ([current, active]) => {
+      if (active && current === paused) return
+      const previous = paused
+      paused = undefined
+      if (previous && !previous.state().destroyed) previous.sleep(false)
+      if (active && current && !current.state().sleeping && !current.state().destroyed) {
+        paused = current
+        current.sleep(true)
+      }
+    },
+    { flush: 'sync' },
+  )
+  let updateFrame = 0
+  useEventListener(content, ['transitionend', 'animationend'], () => {
+    if (transitioning?.value) return
+    cancelAnimationFrame(updateFrame)
+    updateFrame = requestAnimationFrame(() => instance.value?.update(true))
+  })
 
   function onEvent(event: OSEvent, cb: () => void) {
     listeners.push([event, cb])
   }
 
   onMounted(() => {
-    const target = host.value
-    if (target) {
-      for (const name of ['wheel', 'touchmove', 'scroll'] as const) {
-        target.addEventListener(name, markGesture, { passive: true, capture: true })
-      }
-    }
-    schedule(function takeover() {
+    frameId = requestAnimationFrame(() => {
+      frameId = undefined
       if (!host.value || !content.value) return
-      if (performance.now() - lastGesture < 250) {
-        retryId = setTimeout(takeover, 300)
-        return
-      }
-      if (target) {
-        for (const name of ['wheel', 'touchmove', 'scroll'] as const) {
-          target.removeEventListener(name, markGesture, { capture: true })
-        }
-      }
       instance.value = OverlayScrollbars(
         {
           target: host.value,
@@ -93,13 +62,10 @@ export function useOverlayScrollbars(
   })
 
   onBeforeUnmount(() => {
-    cancelSchedule()
-    clearTimeout(retryId)
-    if (host.value) {
-      for (const name of ['wheel', 'touchmove', 'scroll'] as const) {
-        host.value.removeEventListener(name, markGesture, { capture: true })
-      }
-    }
+    stop()
+    paused = undefined
+    cancelAnimationFrame(updateFrame)
+    if (frameId !== undefined) cancelAnimationFrame(frameId)
     instance.value?.destroy()
     instance.value = undefined
     viewport.value = undefined

package/src/components/scroll-area/composables/useWheelRedirect.ts

@@ -11,11 +11,13 @@ export function useWheelRedirect(
     if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
     const max = el.scrollWidth - el.clientWidth
     if (max <= 0) return
-    const atStart = el.scrollLeft <= 0 && event.deltaY < 0
-    const atEnd = el.scrollLeft >= max - 1 && event.deltaY > 0
+    const sign = getComputedStyle(el).direction === 'rtl' ? -1 : 1
+    const offset = Math.max(0, Math.min(max, el.scrollLeft * sign))
+    const atStart = offset <= 1 && event.deltaY < 0
+    const atEnd = offset >= max - 1 && event.deltaY > 0
     if (atStart || atEnd) return
     event.preventDefault()
-    el.scrollLeft += event.deltaY
+    el.scrollLeft = (offset + event.deltaY) * sign
   }
 
   watch(

package/src/components/scroll-top/ScrollTop.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { ArrowUp } from '@lucide/vue'
+  import { useUiLocale } from '../../locale'
+  import FloatButton from '../float-button/FloatButton.vue'
+  import { useScrollTop } from './composables/useScrollTop'
+  import type { ScrollTopProps } from './types'
+
+  defineOptions({ name: 'HnScrollTop', inheritAttrs: false })
+  const props = withDefaults(defineProps<ScrollTopProps>(), {
+    tooltip: true,
+    ripple: true,
+    variant: 'outline',
+    tone: 'neutral',
+  })
+  const emit = defineEmits<{ click: [event: MouseEvent] }>()
+  defineSlots<{ default?(): unknown }>()
+  const t = useUiLocale()
+  const { visible, scrollToTop, onFocus, onBlur } = useScrollTop(props)
+  function activate(event: MouseEvent) {
+    emit('click', event)
+    if (!event.defaultPrevented) scrollToTop()
+  }
+  defineExpose({ visible, scrollToTop })
+</script>
+
+<template>
+  <FloatButton
+    :visible="visible"
+    v-bind="$attrs"
+    data-hn-scroll-top
+    :label="props.label ?? t.scroll.backToTop"
+    :position="props.position"
+    :placement="props.placement"
+    :offset="props.offset"
+    :size="props.size"
+    :shape="props.shape"
+    :extended="props.extended"
+    :variant="props.variant"
+    :tone="props.tone"
+    :tooltip="props.tooltip"
+    :tooltip-side="props.tooltipSide"
+    :disabled="props.disabled"
+    :loading="props.loading"
+    :ripple="props.ripple"
+    :class="props.class"
+    :style="props.style"
+    @click="activate"
+    @focus="onFocus"
+    @blur="onBlur"
+  >
+    <slot><ArrowUp /></slot>
+  </FloatButton>
+</template>

package/src/components/scroll-top/composables/useScrollTop.ts

@@ -0,0 +1,54 @@
+import { computed, onMounted, ref, toValue, watch, watchEffect } from 'vue'
+import { usePreferredReducedMotion } from '@vueuse/core'
+import type { ScrollTopProps } from '../types'
+
+export function useScrollTop(props: ScrollTopProps) {
+  const mounted = ref(false)
+  const pastThreshold = ref(false)
+  const keyboardFocused = ref(false)
+  const reducedMotion = usePreferredReducedMotion()
+  onMounted(() => {
+    mounted.value = true
+  })
+  const target = computed(() => {
+    if (!mounted.value) return undefined
+    return props.target === undefined ? window : toValue(props.target)
+  })
+  const visible = computed(() => !!target.value && (pastThreshold.value || keyboardFocused.value))
+  watch(target, () => {
+    keyboardFocused.value = false
+  })
+
+  watchEffect(
+    onCleanup => {
+      const element = target.value
+      const threshold = Number.isFinite(props.threshold) ? Math.max(0, props.threshold!) : 300
+      pastThreshold.value = false
+      if (!element) return
+      const update = () => {
+        pastThreshold.value =
+          ('scrollY' in element ? element.scrollY : element.scrollTop) > threshold
+      }
+      update()
+      element.addEventListener('scroll', update, { passive: true })
+      onCleanup(() => element.removeEventListener('scroll', update))
+    },
+    { flush: 'post' },
+  )
+
+  function scrollToTop() {
+    if (!target.value || props.disabled || props.loading) return
+    target.value.scrollTo({
+      top: 0,
+      behavior: reducedMotion.value === 'reduce' ? 'instant' : (props.behavior ?? 'smooth'),
+    })
+    toValue(props.focusTarget)?.focus({ preventScroll: true })
+  }
+  function onFocus(event: FocusEvent) {
+    keyboardFocused.value = (event.target as HTMLElement).matches(':focus-visible')
+  }
+  function onBlur() {
+    keyboardFocused.value = false
+  }
+  return { visible, scrollToTop, onFocus, onBlur }
+}