@hina-ui/vue 1.7.6 → 1.7.7

package/src/components/panel/Panel.vue

@@ -25,7 +25,7 @@
 
 <template>
   <Card data-hn-panel :padded="false" :class="cn('flex flex-col', props.class)">
-    <div :class="panelHeader()">
+    <div :class="panelHeader({ bodiless: !slots.default })">
       <div class="flex min-w-0 flex-col gap-1">
         <div :class="panelTitle()">
           <span v-if="slots.icon" :class="panelIcon()" aria-hidden="true">

package/src/components/pin-input/PinInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { PinInputInput, PinInputRoot } from 'reka-ui'
+  import { PinInputInput, PinInputRoot } from '../../primitives/pin-input'
   import { computed } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/prev-next/PrevNextLink.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { ArrowLeft, ArrowRight } from '@lucide/vue'
   import Ripple from '../ripple/Ripple.vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import { prevNextLink, prevNextEyebrow, type PrevNextVariants } from './prev-next.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnPrevNextLink', inheritAttrs: false })
 

package/src/components/progress/Progress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ProgressIndicator, ProgressRoot } from 'reka-ui'
+  import { ProgressIndicator, ProgressRoot } from '../../primitives/progress'
   import { cn } from '../../lib/cn'
   import { useProgressValue, type ProgressFormat } from './composables/useProgressValue'
   import {

package/src/components/prose/Prose.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnProse' })
 

package/src/components/radio-group/RadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+  import { RadioGroupItem, RadioGroupRoot } from '../../primitives/radio-group'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
   import {

package/src/components/range-slider/RangeSlider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SliderRoot, SliderTrack } from 'reka-ui'
+  import { SliderRoot, SliderTrack } from '../../primitives/slider'
   import { computed, toRef } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/rating/Rating.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { RatingItem, RatingItemIndicator, RatingRoot } from 'reka-ui'
+  import { RatingItem, RatingItemIndicator, RatingRoot } from '../../primitives/rating'
   import { Star } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import { rekaRatingStepStyle } from '../../lib/reka/styles'

package/src/components/ring-progress/RingProgress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ProgressRoot } from 'reka-ui'
+  import { ProgressRoot } from '../../primitives/progress'
   import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useProgressValue, type ProgressFormat } from '../progress/composables/useProgressValue'

package/src/components/section/Section.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed, useAttrs, useId } from 'vue'
   import { cn } from '../../lib/cn'
   import Heading from '../heading/Heading.vue'
 
@@ -9,11 +10,21 @@
     id?: string
     class?: string
   }>()
+
+  const attrs = useAttrs()
+  const headingId = useId()
+  const labelledBy = computed(() =>
+    props.title && !attrs['aria-label'] && !attrs['aria-labelledby'] ? headingId : undefined,
+  )
 </script>
 
 <template>
-  <section :id="props.id" :class="cn('flex scroll-mt-6 flex-col gap-4', props.class)">
-    <Heading v-if="props.title" :level="2">{{ props.title }}</Heading>
+  <section
+    :id="props.id"
+    :aria-labelledby="labelledBy"
+    :class="cn('flex scroll-mt-6 flex-col gap-4', props.class)"
+  >
+    <Heading v-if="props.title" :id="headingId" :level="2">{{ props.title }}</Heading>
     <slot />
   </section>
 </template>

package/src/components/segmented-control/SegmentedControl.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { ToggleGroupItem, ToggleGroupRoot, type AcceptableValue } from 'reka-ui'
+  import { ToggleGroupItem, ToggleGroupRoot } from '../../primitives/toggle-group'
+  import type { AcceptableValue } from '../../primitives/utils/types'
   import { computed, useId, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/sidebar/Sidebar.vue

@@ -4,7 +4,7 @@
   import { useUiLocale } from '../../locale'
   import CloseButton from '../close-button/CloseButton.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
-  import { useSidebar, type SidebarState } from './context'
+  import { provideSidebarScope, useSidebar, type SidebarState } from './context'
   import SidebarLabel from './SidebarLabel.vue'
   import {
     sidebarRoot,
@@ -35,6 +35,7 @@
 
   const t = useUiLocale()
   const sidebar = useSidebar()
+  provideSidebarScope()
   const state = computed(() => sidebar?.state.value ?? 'expanded')
   const inDrawer = computed(() => sidebar?.inDrawer ?? false)
 </script>

package/src/components/sidebar/context.ts

@@ -11,6 +11,7 @@ export interface SidebarContext {
 }
 
 const SIDEBAR_KEY = Symbol('hn-sidebar') as InjectionKey<SidebarContext>
+const SIDEBAR_SCOPE_KEY = Symbol('hn-sidebar-scope') as InjectionKey<boolean>
 
 export function provideSidebar(context: SidebarContext) {
   provide(SIDEBAR_KEY, context)
@@ -19,3 +20,11 @@ export function provideSidebar(context: SidebarContext) {
 export function useSidebar() {
   return inject(SIDEBAR_KEY, null)
 }
+
+export function provideSidebarScope() {
+  provide(SIDEBAR_SCOPE_KEY, true)
+}
+
+export function useInSidebar() {
+  return inject(SIDEBAR_SCOPE_KEY, false)
+}

package/src/components/slider/Slider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SliderRoot, SliderTrack } from 'reka-ui'
+  import { SliderRoot, SliderTrack } from '../../primitives/slider'
   import { computed, toRef } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/slider/SliderHandle.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext, SliderThumb } from 'reka-ui'
+  import { injectTooltipProviderContext } from 'reka-ui'
+  import { SliderThumb } from '../../primitives/slider'
   import { rekaSliderThumbStyle } from '../../lib/reka/styles'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { sliderThumb } from './slider.variants'

package/src/components/split-button/types.ts

@@ -1,6 +1,6 @@
 import type { StyleValue } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
 
 export interface SplitButtonProps {
   as?: PrimitiveProps['as']

package/src/components/splitter/Splitter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SplitterGroup } from 'reka-ui'
+  import { SplitterGroup } from '../../primitives/splitter'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnSplitter' })

package/src/components/splitter/SplitterHandle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SplitterResizeHandle } from 'reka-ui'
+  import { SplitterResizeHandle } from '../../primitives/splitter'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
 

package/src/components/splitter/SplitterPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SplitterPanel as RekaSplitterPanel } from 'reka-ui'
+  import { SplitterPanel as RekaSplitterPanel } from '../../primitives/splitter'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnSplitterPanel' })

package/src/components/statistic/Statistic.vue

@@ -60,7 +60,7 @@
     <div :class="statisticBody()">
       <span :class="statisticLabel()">{{ props.label }}</span>
       <span :class="statisticValue({ size: props.size })">
-        <Skeleton v-if="props.loading" class="h-[1.25em] w-24" />
+        <Skeleton v-if="props.loading" class="h-[1lh] w-24" />
         <template v-else>
           <span v-if="props.prefix" :class="statisticAffix()">{{ props.prefix }}</span>
           <NumberFormat
@@ -75,7 +75,7 @@
         </template>
       </span>
       <span v-if="deltaText" :class="statisticDelta({ tone: deltaTone })">
-        <Skeleton v-if="props.loading" class="h-[1.25em] w-16" />
+        <Skeleton v-if="props.loading" class="h-[1lh] w-16" />
         <template v-else>
           <TrendingUp v-if="props.delta! > 0" aria-hidden="true" />
           <TrendingDown v-else-if="props.delta! < 0" aria-hidden="true" />

package/src/components/stepper/Stepper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends StepperItem = StepperItem">
-  import { StepperRoot } from 'reka-ui'
+  import { StepperRoot } from '../../primitives/stepper'
   import { useId } from 'vue'
   import { cn } from '../../lib/cn'
   import { useDirection } from '../../lib/useDirection'

package/src/components/stepper/StepperStep.vue

@@ -7,7 +7,7 @@
     StepperDescription,
     StepperIndicator,
     StepperSeparator,
-  } from 'reka-ui'
+  } from '../../primitives/stepper'
   import { useUiLocale } from '../../locale'
   import Spinner from '../spinner/Spinner.vue'
   import { stepperIndicator, stepperTrigger } from './stepper.variants'

package/src/components/switch/Switch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SwitchRoot } from 'reka-ui'
+  import { SwitchRoot } from '../../primitives/switch'
   import { useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/tabs/Tabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsRoot } from 'reka-ui'
+  import { TabsRoot } from '../../primitives/tabs'
   import { useId } from 'vue'
   import { cn } from '../../lib/cn'
   import { provideTabsStyle } from './context'

package/src/components/tabs/TabsContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsContent } from 'reka-ui'
+  import { TabsContent } from '../../primitives/tabs'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnTabsContent' })

package/src/components/tabs/TabsList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed, shallowRef } from 'vue'
-  import { TabsList } from 'reka-ui'
+  import { TabsList } from '../../primitives/tabs'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { cn } from '../../lib/cn'
   import { useTabsStyle } from './context'

package/src/components/tabs/TabsTrigger.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsTrigger, injectTabsRootContext } from 'reka-ui'
+  import { TabsTrigger, injectTabsRootContext } from '../../primitives/tabs'
   import { computed } from 'vue'
   import Highlight from '../highlight/Highlight.vue'
   import Ripple from '../ripple/Ripple.vue'

package/src/components/tag/Tag.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { tag, type TagVariants } from './tag.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnTag' })
 

package/src/components/text/Text.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { text, type TextVariants } from './text.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnText' })
 

package/src/components/time/Time.vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
   import { computed } from 'vue'
+  import { injectTooltipProviderContext } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
+  import Tooltip from '../tooltip/Tooltip.vue'
   import { relativeTime } from './utils/relativeTime'
   import { useNow } from './composables/useNow'
 
-  defineOptions({ name: 'HnTime' })
+  defineOptions({ name: 'HnTime', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
       value?: string | number | Date | null
       format?: 'datetime' | 'date' | 'time' | 'relative'
+      tooltip?: boolean
       class?: string
     }>(),
-    { format: 'datetime' },
+    { format: 'datetime', tooltip: true },
   )
 
   const t = useUiLocale()
@@ -49,16 +52,30 @@
       ? new Intl.DateTimeFormat(t.value.tag, absoluteOptions.datetime).format(date.value)
       : undefined,
   )
+
+  const provider = injectTooltipProviderContext(null)
+  const hint = computed(() => !!provider && props.tooltip && props.format === 'relative')
 </script>
 
 <template>
+  <Tooltip v-if="date && hint" :content="absolute">
+    <time
+      :datetime="date.toISOString()"
+      data-allow-mismatch="text"
+      :class="cn(props.class)"
+      v-bind="$attrs"
+    >
+      {{ text }}
+    </time>
+  </Tooltip>
   <time
-    v-if="date"
+    v-else-if="date"
     :datetime="date.toISOString()"
-    :title="format === 'relative' ? absolute : undefined"
+    data-allow-mismatch="text"
     :class="cn(props.class)"
+    v-bind="$attrs"
   >
     {{ text }}
   </time>
-  <span v-else :class="cn(props.class)">{{ text }}</span>
+  <span v-else :class="cn(props.class)" v-bind="$attrs">{{ text }}</span>
 </template>

package/src/components/toast/Toaster.vue

@@ -154,6 +154,7 @@
     </ToastRoot>
     <ToastPortal>
       <ToastViewport
+        aria-live="off"
         :label="props.label ?? t.toast.regionLabel"
         :data-pos="props.position ?? 'auto'"
         :data-expanded="expanded ? '' : undefined"

package/src/components/toggle/Toggle.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { Toggle as ToggleRoot, injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from 'reka-ui'
+  import { Toggle as ToggleRoot } from '../../primitives/toggle'
   import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/toolbar/Toolbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { toRef } from 'vue'
-  import { ToolbarRoot } from 'reka-ui'
+  import { ToolbarRoot } from '../../primitives/toolbar'
   import { cn } from '../../lib/cn'
   import { useAccessibleName } from '../../lib/a11y'
   import { useDirection } from '../../lib/useDirection'

package/src/components/toolbar/ToolbarButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import { ToolbarButton as RekaToolbarButton } from '../../primitives/toolbar'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar } from './context'
   import type { ToolbarControlProps } from './types'

package/src/components/toolbar/ToolbarLink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import { ToolbarButton as RekaToolbarButton } from '../../primitives/toolbar'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar } from './context'
   import type { ToolbarControlProps } from './types'

package/src/components/toolbar/ToolbarSeparator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Separator } from 'reka-ui'
+  import { Separator } from '../../primitives/separator'
   import { cn } from '../../lib/cn'
   import { useToolbar } from './context'
   import { toolbarSeparator } from './toolbar.variants'

package/src/components/toolbar/ToolbarToggleGroup.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends string | string[] = string | string[]">
   import { computed } from 'vue'
-  import { ToolbarToggleGroup as RekaToolbarToggleGroup, type AcceptableValue } from 'reka-ui'
+  import { ToolbarToggleGroup as RekaToolbarToggleGroup } from '../../primitives/toolbar'
+  import type { AcceptableValue } from '../../primitives/utils/types'
   import { cn } from '../../lib/cn'
   import { useToolbar, provideToolbarGroup } from './context'
   import { toolbarGroup } from './toolbar.variants'

package/src/components/toolbar/ToolbarToggleItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarToggleItem as RekaToolbarToggleItem } from 'reka-ui'
+  import { ToolbarToggleItem as RekaToolbarToggleItem } from '../../primitives/toolbar'
   import { cn } from '../../lib/cn'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar, useToolbarGroup } from './context'

package/src/components/toolbar/types.ts

@@ -1,5 +1,5 @@
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
 
 export type ToolbarOrientation = 'horizontal' | 'vertical'
 export type ToolbarSize = 'sm' | 'md' | 'lg'

package/src/components/visually-hidden/VisuallyHidden.vue

@@ -1,29 +1,15 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
+  import { VISUALLY_HIDDEN_STYLE } from '../../../../shared/src/primitives/visually-hidden'
 
   defineOptions({ name: 'HnVisuallyHidden' })
 
   const props = withDefaults(defineProps<PrimitiveProps>(), { as: 'span' })
-
-  const hidden = {
-    position: 'absolute',
-    border: 0,
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    clipPath: 'inset(50%)',
-    whiteSpace: 'nowrap',
-    wordWrap: 'normal',
-    top: '-1px',
-    left: '-1px',
-  } as const
 </script>
 
 <template>
-  <Primitive :as="props.as" :as-child="props.asChild" :style="hidden">
+  <Primitive :as="props.as" :as-child="props.asChild" :style="VISUALLY_HIDDEN_STYLE">
     <slot />
   </Primitive>
 </template>

package/src/lib/useDirection.ts

@@ -1,5 +1,6 @@
 import { computed, shallowRef, watchEffect } from 'vue'
-import { injectConfigProviderContext, type Direction } from 'reka-ui'
+import { injectConfigProviderContext } from '../primitives/utils/config'
+import type { Direction } from '../primitives/utils/useDirection'
 
 export function useDirection(dir: () => Direction | undefined) {
   const root = shallowRef<HTMLElement>()

package/src/primitives/accordion/AccordionContent.ts

@@ -0,0 +1,47 @@
+import { defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { CollapsibleContent } from '../collapsible'
+import type { PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectAccordionItemContext, injectAccordionRootContext } from './context'
+
+export interface AccordionContentProps {
+  forceMount?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const AccordionContent = defineComponent({
+  name: 'AccordionContent',
+  props: {
+    forceMount: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectAccordionRootContext()
+    const itemContext = injectAccordionItemContext()
+    useForwardExpose()
+    const onContentFound = () => rootContext.changeModelValue(itemContext.value.value)
+
+    return () =>
+      h(
+        CollapsibleContent,
+        {
+          role: 'region',
+          'as-child': props.asChild,
+          as: props.as,
+          'force-mount': props.forceMount,
+          'aria-labelledby': itemContext.triggerId,
+          'data-state': itemContext.dataState.value,
+          'data-disabled': itemContext.dataDisabled.value,
+          'data-orientation': rootContext.orientation,
+          style: {
+            '--reka-accordion-content-width': 'var(--reka-collapsible-content-width)',
+            '--reka-accordion-content-height': 'var(--reka-collapsible-content-height)',
+          },
+          onContentFound,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/accordion/AccordionHeader.ts

@@ -0,0 +1,35 @@
+import { defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectAccordionItemContext, injectAccordionRootContext } from './context'
+
+export interface AccordionHeaderProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const AccordionHeader = defineComponent({
+  name: 'AccordionHeader',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false, default: 'h3' },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectAccordionRootContext()
+    const itemContext = injectAccordionItemContext()
+    useForwardExpose()
+
+    return () =>
+      h(
+        Primitive,
+        {
+          as: props.as,
+          'as-child': props.asChild,
+          'data-orientation': rootContext.orientation,
+          'data-state': itemContext.dataState.value,
+          'data-disabled': itemContext.dataDisabled.value,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})