{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "header-floating-pill",
  "title": "Header — Floating Pill",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/header-floating-pill/HeaderFloatingPill.vue",
      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\nimport { Layers, Menu } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst links = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n]\n\nconst active = ref(0)\nconst open = ref(false)\nconst navEl = ref<HTMLElement | null>(null)\n// Measured from the live element, so the indicator fits any label length or\n// font — no hard-coded widths to drift out of sync with the copy.\nconst indicator = ref({ left: 0, width: 0 })\n\nfunction measure(index = active.value) {\n  const items = navEl.value?.querySelectorAll<HTMLElement>('[data-pill-link]')\n  const el = items?.[index]\n  if (!el) return\n  indicator.value = { left: el.offsetLeft, width: el.offsetWidth }\n}\n\nlet observer: ResizeObserver | undefined\n\nonMounted(() => {\n  measure()\n  if ('ResizeObserver' in window && navEl.value) {\n    observer = new ResizeObserver(() => measure())\n    observer.observe(navEl.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div data-slot=\"header-floating-pill\" class=\"pointer-events-none sticky top-0 z-40 px-4 pt-4\">\n    <header\n      class=\"border-border bg-card/85 pointer-events-auto mx-auto flex h-14 max-w-4xl items-center gap-3 rounded-full border px-3 shadow-sm backdrop-blur\"\n    >\n      <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 pl-2 font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-4\" aria-hidden=\"true\" />\n        Verity\n      </a>\n\n      <nav ref=\"navEl\" class=\"relative hidden items-center md:flex\" aria-label=\"Primary\">\n        <span\n          class=\"bg-muted absolute inset-y-1 rounded-full transition-colors duration-200 ease-out\"\n          :style=\"{ left: `${indicator.left}px`, width: `${indicator.width}px` }\"\n          aria-hidden=\"true\"\n        />\n        <a\n          v-for=\"(link, index) in links\"\n          :key=\"link.href\"\n          :href=\"link.href\"\n          data-pill-link\n          class=\"focus-visible:ring-ring relative rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          :class=\"index === active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'\"\n          :aria-current=\"index === active ? 'page' : undefined\"\n          @mouseenter=\"measure(index)\"\n          @mouseleave=\"measure()\"\n          @focus=\"measure(index)\"\n          @blur=\"measure()\"\n          @click=\"active = index\"\n        >\n          {{ link.label }}\n        </a>\n      </nav>\n\n      <Button size=\"sm\" class=\"ml-auto rounded-full\">Start free</Button>\n\n      <Sheet v-model:open=\"open\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"rounded-full md:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"top\">\n          <SheetHeader>\n            <SheetTitle>Menu</SheetTitle>\n          </SheetHeader>\n          <nav class=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n            <a\n              v-for=\"link in links\"\n              :key=\"link.href\"\n              :href=\"link.href\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              @click=\"open = false\"\n            >\n              {{ link.label }}\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n    </header>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeaderFloatingPill.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/sheet.json"
  ],
  "description": "Detached pill navbar that floats above the page with a blurred surface, a sliding active indicator that tracks the current link, and a compact CTA on the right.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}