fulldev-ui 0.11.1 → 0.12.0

package/registry.json

@@ -10,7 +10,7 @@
       "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/accordion/",
-      "dependencies": ["@data-slot/accordion", "@lucide/astro"],
+      "dependencies": ["@data-slot/accordion@^1.0.1", "@lucide/astro"],
       "files": [
         {
           "path": "src/components/ui/accordion/accordion.astro",
@@ -67,7 +67,7 @@
       "description": "A modal dialog for important confirmations that expects a response.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/alert-dialog/",
-      "dependencies": ["@data-slot/alert-dialog"],
+      "dependencies": ["@data-slot/alert-dialog@^1.0.1"],
       "registryDependencies": ["@fulldev/button"],
       "files": [
         {
@@ -180,7 +180,6 @@
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/banner/",
       "dependencies": ["@lucide/astro"],
-      "registryDependencies": ["@fulldev/button", "@fulldev/dropdown-menu"],
       "files": [
         {
           "path": "src/components/ui/banner/banner.astro",
@@ -328,7 +327,7 @@
       "description": "An interactive component which expands/collapses a panel.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/collapsible/",
-      "dependencies": ["@data-slot/collapsible"],
+      "dependencies": ["@data-slot/collapsible@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/collapsible/collapsible.astro",
@@ -355,7 +354,11 @@
       "description": "Autocomplete input with a list of suggestions.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/combobox/",
-      "dependencies": ["@data-slot/combobox", "@lucide/astro"],
+      "dependencies": [
+        "@data-slot/combobox@^1.0.1",
+        "@data-slot/core@^1.0.1",
+        "@lucide/astro"
+      ],
       "registryDependencies": ["@fulldev/input-group"],
       "files": [
         {
@@ -415,7 +418,11 @@
       "description": "Command menu for search and quick actions.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/command/",
-      "dependencies": ["@data-slot/command", "@lucide/astro"],
+      "dependencies": [
+        "@data-slot/command@^1.0.1",
+        "@lucide/astro",
+        "@data-slot/core@^1.0.1"
+      ],
       "registryDependencies": ["@fulldev/dialog"],
       "files": [
         {
@@ -467,7 +474,7 @@
       "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/dialog/",
-      "dependencies": ["@data-slot/dialog", "@lucide/astro"],
+      "dependencies": ["@data-slot/dialog@^1.0.1", "@lucide/astro"],
       "registryDependencies": ["@fulldev/button"],
       "files": [
         {
@@ -523,7 +530,7 @@
       "description": "Displays a menu to the user, such as a set of actions or functions, triggered by a button.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/dropdown-menu/",
-      "dependencies": ["@data-slot/dropdown-menu", "@lucide/astro"],
+      "dependencies": ["@data-slot/dropdown-menu@^1.0.1", "@lucide/astro"],
       "files": [
         {
           "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
@@ -717,7 +724,10 @@
       "description": "For sighted users to preview content available behind a link.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/hover-card/",
-      "dependencies": ["@data-slot/hover-card", "@data-slot/core"],
+      "dependencies": [
+        "@data-slot/hover-card@^1.0.1",
+        "@data-slot/core@^1.0.1"
+      ],
       "files": [
         {
           "path": "src/components/ui/hover-card/hover-card.astro",
@@ -783,7 +793,6 @@
       "docs": "https://ui.full.dev/components/input-group/",
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/dropdown-menu",
         "@fulldev/input",
         "@fulldev/textarea"
       ],
@@ -1011,7 +1020,7 @@
       "description": "A collection of links for navigating websites.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/navigation-menu/",
-      "dependencies": ["@data-slot/navigation-menu", "@lucide/astro"],
+      "dependencies": ["@data-slot/navigation-menu@^1.0.1", "@lucide/astro"],
       "files": [
         {
           "path": "src/components/ui/navigation-menu/navigation-menu.astro",
@@ -1089,7 +1098,7 @@
       "description": "Displays rich content in a floating layer, triggered by a button.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/popover/",
-      "dependencies": ["@data-slot/popover"],
+      "dependencies": ["@data-slot/popover@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/popover/popover.astro",
@@ -1158,7 +1167,7 @@
       "description": "A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/radio-group/",
-      "dependencies": ["@data-slot/radio-group"],
+      "dependencies": ["@data-slot/radio-group@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/radio-group/radio-group.astro",
@@ -1200,7 +1209,7 @@
       "description": "Displays a list of options for the user to pick from, triggered by a button.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/select/",
-      "dependencies": ["@data-slot/select", "@lucide/astro"],
+      "dependencies": ["@data-slot/select@^1.0.1", "@lucide/astro"],
       "files": [
         {
           "path": "src/components/ui/select/select.astro",
@@ -1295,7 +1304,7 @@
       "description": "A sliding panel component that appears from the edge of the screen.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/sheet/",
-      "dependencies": ["@data-slot/dialog", "@lucide/astro"],
+      "dependencies": ["@data-slot/dialog@^1.0.1", "@lucide/astro"],
       "registryDependencies": ["@fulldev/button", "@fulldev/dialog"],
       "files": [
         {
@@ -1343,7 +1352,7 @@
       "description": "A composable, themeable, and customizable Astro sidebar component.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/sidebar/",
-      "dependencies": ["@data-slot/tooltip", "@lucide/astro"],
+      "dependencies": ["@data-slot/tooltip@^1.0.1", "@lucide/astro"],
       "registryDependencies": [
         "@fulldev/layout",
         "@fulldev/button",
@@ -1459,7 +1468,7 @@
       "description": "An input where the user selects a value from within a given range.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/slider/",
-      "dependencies": ["@data-slot/slider"],
+      "dependencies": ["@data-slot/slider@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/slider/slider.astro",
@@ -1515,7 +1524,7 @@
       "description": "A control that allows the user to toggle between checked and not checked.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/switch/",
-      "dependencies": ["@data-slot/switch"],
+      "dependencies": ["@data-slot/switch@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/switch/switch.astro",
@@ -1580,7 +1589,7 @@
       "description": "A set of layered sections of content, known as tabs, that display one panel of content at a time.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/tabs/",
-      "dependencies": ["@data-slot/tabs"],
+      "dependencies": ["@data-slot/tabs@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/tabs/tabs.astro",
@@ -1649,7 +1658,7 @@
       "description": "A two-state button that can be either on or off.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/toggle/",
-      "dependencies": ["@data-slot/toggle"],
+      "dependencies": ["@data-slot/toggle@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/toggle/toggle.astro",
@@ -1690,7 +1699,7 @@
       "description": "Displays contextual information when a user hovers or focuses a trigger.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/tooltip/",
-      "dependencies": ["@data-slot/tooltip"],
+      "dependencies": ["@data-slot/tooltip@^1.0.1"],
       "files": [
         {
           "path": "src/components/ui/tooltip/tooltip.astro",
@@ -1876,6 +1885,7 @@
       "description": "Page-shell primitives for the root html, head, body, and main structure.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/layout/",
+      "dependencies": ["@lexingtonthemes/seo@^0.2.0"],
       "files": [
         {
           "path": "src/components/ui/layout/layout.astro",

package/src/components/blocks/blocks-1.astro

@@ -15,6 +15,7 @@ import { buttonVariants } from "@/components/ui/button/button-variants"
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { SectionContainer } from "@/components/ui/section"
@@ -129,6 +130,7 @@ const openLinks = markdownUrl
               variant="outline"
               size="xs"
               data-source={copyButton?.source}
+              data-blocks-copy
               aria-label={labels.copyMarkdown}
             >
               <Copy class="blocks-copy-icon size-3.5" />
@@ -148,11 +150,10 @@ const openLinks = markdownUrl
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" sideOffset={6} class="w-56">
                 {openLinks.map((link) => (
-                  <a
+                  <DropdownMenuItem
                     href={link.href}
                     target="_blank"
                     rel="noreferrer noopener"
-                    class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
                   >
                     {link.icon === "markdown" && <Markdown class="size-4" />}
                     {link.icon === "chatgpt" && (
@@ -170,7 +171,7 @@ const openLinks = markdownUrl
                     {link.icon === "cursor" && <Cursor class="size-4" />}
                     <span>{link.label}</span>
                     <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
-                  </a>
+                  </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>
             </DropdownMenu>
@@ -224,27 +225,26 @@ const openLinks = markdownUrl
   </div>
 </SectionContainer>
 
-<script is:inline define:vars={{ copyButtonId: copyButton?.id }}>
-  const button = copyButtonId ? document.getElementById(copyButtonId) : null
+<script>
+  document.addEventListener("click", async (event) => {
+    if (!(event.target instanceof Element)) return
+    const button = event.target.closest("[data-blocks-copy]")
+    if (!(button instanceof HTMLButtonElement)) return
 
-  if (button instanceof HTMLButtonElement) {
-    button.addEventListener("click", async () => {
-      const source = button.dataset.source
+    const source = button.dataset.source
+    if (!source) return
 
-      if (!source) return
+    try {
+      await navigator.clipboard.writeText(source)
+      button.querySelector(".blocks-copy-icon")?.classList.add("hidden")
+      button.querySelector(".blocks-check-icon")?.classList.remove("hidden")
 
-      try {
-        await navigator.clipboard.writeText(source)
-        button.querySelector(".blocks-copy-icon")?.classList.add("hidden")
-        button.querySelector(".blocks-check-icon")?.classList.remove("hidden")
-
-        window.setTimeout(() => {
-          button.querySelector(".blocks-copy-icon")?.classList.remove("hidden")
-          button.querySelector(".blocks-check-icon")?.classList.add("hidden")
-        }, 1200)
-      } catch {
-        // Ignore clipboard failures; the button remains available for retry.
-      }
-    })
-  }
+      window.setTimeout(() => {
+        button.querySelector(".blocks-copy-icon")?.classList.remove("hidden")
+        button.querySelector(".blocks-check-icon")?.classList.add("hidden")
+      }, 1200)
+    } catch {
+      // Keep the copy state unchanged so the action can be retried.
+    }
+  })
 </script>

package/src/components/blocks/doc-1.astro

@@ -21,6 +21,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { SectionContainer } from "@/components/ui/section"
@@ -180,11 +181,10 @@ const openLinks = markdownUrl
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" sideOffset={6} class="w-56">
                 {openLinks.map((link) => (
-                  <a
+                  <DropdownMenuItem
                     href={link.href}
                     target="_blank"
                     rel="noreferrer noopener"
-                    class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
                   >
                     {link.icon === "markdown" && <Markdown class="size-4" />}
                     {link.icon === "chatgpt" && (
@@ -202,7 +202,7 @@ const openLinks = markdownUrl
                     {link.icon === "cursor" && <Cursor class="size-4" />}
                     <span>{link.label}</span>
                     <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
-                  </a>
+                  </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>
             </DropdownMenu>
@@ -299,38 +299,52 @@ const openLinks = markdownUrl
   }
 </SectionContainer>
 
-<script is:inline>
+<script>
   const copyIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`
   const checkIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>`
-  document.querySelectorAll("[data-slot='typography'] > pre").forEach((pre) => {
-    if (pre.closest(".docs-code-block")) return
-    const wrapper = document.createElement("div")
-    const button = document.createElement("button")
-    wrapper.className = "docs-code-block"
-    button.type = "button"
-    button.className = "docs-code-copy"
-    button.ariaLabel = "Copy code"
-    button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
-    pre.before(wrapper)
-    wrapper.append(pre, button)
-  })
-  document.addEventListener("click", (event) => {
-    const button = event.target?.closest?.(
+  const initializeCodeBlocks = () => {
+    document
+      .querySelectorAll("[data-slot='typography'] > pre")
+      .forEach((pre) => {
+        if (pre.closest(".docs-code-block")) return
+        const wrapper = document.createElement("div")
+        const button = document.createElement("button")
+        wrapper.className = "docs-code-block"
+        button.type = "button"
+        button.className = "docs-code-copy"
+        button.ariaLabel = "Copy code"
+        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
+        pre.before(wrapper)
+        wrapper.append(pre, button)
+      })
+  }
+
+  initializeCodeBlocks()
+  document.addEventListener("astro:page-load", initializeCodeBlocks)
+
+  document.addEventListener("click", async (event) => {
+    if (!(event.target instanceof Element)) return
+    const button = event.target.closest(
       "[id^='docs-copy-page-'], .docs-code-copy"
     )
-    if (!button) return
+    if (!(button instanceof HTMLButtonElement)) return
     const source =
       button.dataset.source ??
       button
         .closest(".docs-code-block")
         ?.querySelector("pre")
         ?.textContent?.replace(/\n$/, "")
-    button.querySelector("[data-copy-icon]")?.classList.add("hidden")
-    button.querySelector("[data-check-icon]")?.classList.remove("hidden")
-    navigator.clipboard?.writeText(source ?? "")
-    setTimeout(() => {
-      button.querySelector("[data-copy-icon]")?.classList.remove("hidden")
-      button.querySelector("[data-check-icon]")?.classList.add("hidden")
-    }, 1200)
+
+    try {
+      await navigator.clipboard.writeText(source ?? "")
+      button.querySelector("[data-copy-icon]")?.classList.add("hidden")
+      button.querySelector("[data-check-icon]")?.classList.remove("hidden")
+      setTimeout(() => {
+        button.querySelector("[data-copy-icon]")?.classList.remove("hidden")
+        button.querySelector("[data-check-icon]")?.classList.add("hidden")
+      }, 1200)
+    } catch {
+      // Keep the copy state unchanged so the action can be retried.
+    }
   })
 </script>

package/src/components/blocks/sidebar-1.astro

@@ -23,11 +23,12 @@ import {
   CommandList,
   CommandShortcut,
 } from "@/components/ui/command"
-import { Dialog, DialogTrigger } from "@/components/ui/dialog"
+import { DialogTrigger } from "@/components/ui/dialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
@@ -139,7 +140,7 @@ try {
 <SidebarProvider>
   <Sidebar class={cn("", className)} collapsible="offcanvas" variant="inset">
     <SidebarHeader class="flex-col">
-      <SidebarMenuButton size="lg" variant="ghost" href={logo.href}>
+      <SidebarMenuButton size="lg" href={logo.href}>
         <LogoImage
           src={logo.src}
           srcLight={logo.srcLight}
@@ -148,8 +149,14 @@ try {
         />
         <LogoText class="font-semibold">{logo.label}</LogoText>
       </SidebarMenuButton>
-      <Dialog class="w-full" data-search-dialog>
+      <CommandDialog
+        class="w-full"
+        data-search-dialog
+        title={search.label}
+        description={search.label}
+      >
         <DialogTrigger
+          slot="trigger"
           variant="outline"
           size="sm"
           class="w-full justify-start shadow-none"
@@ -165,40 +172,38 @@ try {
           </Kbd>
         </DialogTrigger>
 
-        <CommandDialog title={search.label} description={search.label}>
-          <Command
-            class="[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground"
-          >
-            <CommandInput placeholder={search.label} />
-            <CommandList>
-              <CommandEmpty>{search.empty}</CommandEmpty>
+        <Command
+          class="[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground"
+        >
+          <CommandInput autofocus placeholder={search.label} />
+          <CommandList>
+            <CommandEmpty>{search.empty}</CommandEmpty>
 
-              {
-                searchGroups.map((group) => (
-                  <CommandGroup heading={group.label}>
-                    {group.items.map((item) => (
-                      <CommandItem
-                        href={item.href}
-                        value={`${item.group} ${item.label}`}
-                        label={item.label}
-                        keywords={[
-                          item.group,
-                          item.title,
-                          item.path,
-                          item.description,
-                        ]}
-                      >
-                        {item.label}
-                        <CommandShortcut>{item.href}</CommandShortcut>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                ))
-              }
-            </CommandList>
-          </Command>
-        </CommandDialog>
-      </Dialog>
+            {
+              searchGroups.map((group) => (
+                <CommandGroup heading={group.label}>
+                  {group.items.map((item) => (
+                    <CommandItem
+                      href={item.href}
+                      value={`${item.group} ${item.label}`}
+                      label={item.label}
+                      keywords={[
+                        item.group,
+                        item.title,
+                        item.path,
+                        item.description,
+                      ]}
+                    >
+                      {item.label}
+                      <CommandShortcut>{item.href}</CommandShortcut>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))
+            }
+          </CommandList>
+        </Command>
+      </CommandDialog>
     </SidebarHeader>
     <SidebarContent
       class="[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]"
@@ -268,7 +273,7 @@ try {
                             <DropdownMenuContent align="start">
                               <DropdownMenuGroup>
                                 {breadcrumb.menu.map((menuItem) => (
-                                  <a
+                                  <DropdownMenuItem
                                     href={menuItem.href}
                                     aria-current={
                                       normalizePath(menuItem.href) ===
@@ -276,10 +281,10 @@ try {
                                         ? "page"
                                         : undefined
                                     }
-                                    class="hover:bg-accent hover:text-accent-foreground aria-[current=page]:text-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+                                    class="aria-[current=page]:text-foreground"
                                   >
                                     {menuItem.label}
-                                  </a>
+                                  </DropdownMenuItem>
                                 ))}
                               </DropdownMenuGroup>
                             </DropdownMenuContent>
@@ -308,12 +313,9 @@ try {
                         <DropdownMenuContent align="start">
                           <DropdownMenuGroup>
                             {breadcrumb.menu.map((item) => (
-                              <a
-                                href={item.href}
-                                class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
-                              >
+                              <DropdownMenuItem href={item.href}>
                                 {item.label}
-                              </a>
+                              </DropdownMenuItem>
                             ))}
                           </DropdownMenuGroup>
                         </DropdownMenuContent>

package/src/components/ui/accordion/accordion.astro

@@ -48,6 +48,12 @@ const serializedDefaultValue = Array.isArray(defaultValue)
 <script>
   import { create } from "@data-slot/accordion"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
 </script>

package/src/components/ui/alert-dialog/alert-dialog.astro

@@ -33,6 +33,12 @@ const {
 <script>
   import { create } from "@data-slot/alert-dialog"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
 </script>

package/src/components/ui/button/button.astro

@@ -15,12 +15,15 @@ const {
   size,
   ...props
 } = Astro.props
+
+const attributes: Record<string, unknown> = { ...props }
+if (Tag === "button") attributes.type ??= "button"
 ---
 
 <Tag
   data-slot="button"
   class={cn(buttonVariants({ variant, size }), className)}
-  {...props}
+  {...attributes}
 >
   <slot />
 </Tag>

package/src/components/ui/collapsible/collapsible.astro

@@ -29,6 +29,12 @@ const {
 <script>
   import { create } from "@data-slot/collapsible"
 
-  create()
-  document.addEventListener("astro:page-load", () => create())
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
 </script>

package/src/components/ui/combobox/combobox-content.astro

@@ -38,7 +38,7 @@ const {
     data-align-offset={alignOffset}
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
-    class="isolate z-50"
+    class="isolate z-[1000]"
   >
     <div
       data-slot="combobox-content"

package/src/components/ui/combobox/combobox.astro

@@ -67,22 +67,14 @@ const {
 </div>
 
 <script>
-  import { createCombobox } from "@data-slot/combobox"
+  import { create } from "@data-slot/combobox"
 
-  const initCombobox = () => {
-    document.querySelectorAll('[data-slot="combobox"]').forEach((root) => {
-      if (
-        !root.querySelector('[data-slot="combobox-input"]') ||
-        !root.querySelector('[data-slot="combobox-content"]')
-      ) {
-        return
-      }
-
-      createCombobox(root as HTMLElement)
-    })
-  }
-
-  initCombobox()
-
-  document.addEventListener("astro:page-load", initCombobox)
+  const controllers: ReturnType<typeof create> = []
+  const initialize = () => controllers.push(...create())
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const controller of controllers) controller.destroy()
+    controllers.length = 0
+  })
 </script>