Building This Documentation

<script setup lang="ts">
  import { createSingle, useProxyRegistry } from '@vuetify/v0'
  import { useId } from 'vue'

  // events: true is required for useProxyRegistry snapshots
  const single = createSingle({ mandatory: 'force', events: true })
  const proxy = useProxyRegistry(single)
  const uid = useId()

  // Manual activation: arrows move focus only; Enter/Space selects (native button)
  function onKeydown (event: KeyboardEvent) {
    const tabs = Array.from(proxy.values)
    const currentIndex = tabs.findIndex(t => t.isSelected.value)
    let nextIndex = currentIndex

    switch (event.key) {
      case 'ArrowLeft':
        nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1
        event.preventDefault()
        break
      case 'ArrowRight':
        nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0
        event.preventDefault()
        break
      case 'Home':
        nextIndex = 0
        event.preventDefault()
        break
      case 'End':
        nextIndex = tabs.length - 1
        event.preventDefault()
        break
      default:
        return
    }

    if (nextIndex !== currentIndex) {
      document.querySelector<HTMLButtonElement>(
        `#${CSS.escape(`${uid}-tab-${tabs[nextIndex].id}`)}`,
      )?.focus()
    }
  }
</script>

<template>
  <div role="tablist" @keydown="onKeydown">
    <button
      v-for="tab in proxy.values"
      :id="`${uid}-tab-${tab.id}`"
      :key="tab.id"
      :aria-selected="tab.isSelected.value"
      role="tab"
      :tabindex="tab.isSelected.value ? 0 : -1"
      @click="tab.toggle"
    >
      {{ tab.value }}
    </button>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, shallowRef, useTemplateRef } from 'vue'
  import { IN_BROWSER, useClickOutside, useStack, useWindowEventListener } from '@vuetify/v0'
  import { useNavigation } from '@/composables/useNavigation'

  const navigation = useNavigation()
  const navRef = useTemplateRef<HTMLElement>('nav')
  const stack = useStack()

  // Match Tailwind's md breakpoint (768px) for mobile detection
  const isMobile = shallowRef(true)

  function updateMobile () {
    if (!IN_BROWSER) return
    isMobile.value = window.innerWidth < 768
  }

  onMounted(updateMobile)
  useWindowEventListener('resize', updateMobile, { passive: true })

  // Coordinate z-index with other overlays; dismiss when popped off the stack (mobile only)
  const ticket = stack.register({ onDismiss: () => navigation.close() })

  // Close the drawer when clicking outside it on mobile
  useClickOutside(
    () => navRef.value,
    () => {
      if (navigation.isOpen.value && isMobile.value) {
        navigation.close()
      }
    },
    { ignore: ['[data-app-bar]'] },
  )
</script>

<template>
  <nav
    ref="nav"
    aria-label="Main navigation"
    :inert="!navigation.isOpen.value && isMobile ? true : undefined"
    :style="{ zIndex: isMobile ? ticket.zIndex.value : undefined }"
  >
    <slot />
  </nav>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Selection } from '@vuetify/v0'

  const items = [
    { id: 1, label: 'Option A' },
    { id: 2, label: 'Option B' },
    { id: 3, label: 'Option C' },
  ]

  const model = ref<number[]>([])
</script>

<template>
  <Selection.Root v-model="model" multiple>
    <Selection.Item
      v-for="item in items"
      :key="item.id"
      v-slot="{ attrs, isSelected }"
      :value="item.id"
    >
      <button
        v-bind="attrs"
        :class="isSelected ? 'bg-primary' : 'bg-surface'"
      >
        {{ item.label }}
      </button>
    </Selection.Item>
  </Selection.Root>
</template>

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [presetWind4()],
  theme: {
    colors: {
      'primary': 'var(--v0-primary)',
      'surface': 'var(--v0-surface)',
      'on-primary': 'var(--v0-on-primary)',
      'on-surface': 'var(--v0-on-surface)',
      // ... all v0 tokens
    },
  },
  shortcuts: {
    'bg-glass-surface': '[background:var(--v0-glass-surface)] backdrop-blur-12',
  },
})

<!-- Bad: Logic trapped in component -->
<template>
  <TabGroup @change="handleChange">
    <Tab>One</Tab>
  </TabGroup>
</template>

<!-- Good: Logic accessible, component is delivery -->
<script setup lang="ts">
  import { createSingle } from '@vuetify/v0'

  const single = createSingle()
</script>

<template>
  <Single.Root :single>
    <Single.Item v-slot="{ isSelected, toggle }">
      <button @click="toggle">One</button>
    </Single.Item>
  </Single.Root>
</template>