fulldev-ui 0.11.1 → 0.13.0

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>

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

@@ -25,6 +25,7 @@ const {
 ---
 
 <Dialog {...props}>
+  <slot name="trigger" />
   <DialogContent
     class:list={[
       "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",

package/src/components/ui/command/command.astro

@@ -46,31 +46,46 @@ const {
 
 <script>
   import { create } from "@data-slot/command"
+  import { getParts } from "@data-slot/core"
 
-  const initCommand = () => {
-    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
+  })
 
-    document.querySelectorAll("[data-slot=command]").forEach((command) => {
-      if (!(command instanceof HTMLElement)) return
-      if (command.dataset.linkNavigation === "true") return
-
-      command.dataset.linkNavigation = "true"
-      command.addEventListener("command:select", (event) => {
-        const { detail } = event as CustomEvent<{ value?: unknown }>
-        const value = detail?.value
-        if (typeof value !== "string") return
-
-        const item = Array.from(
-          command.querySelectorAll("[data-slot=command-item][href]")
-        ).find((item) => item.getAttribute("data-value") === value)
-        const href = item?.getAttribute("href")
-
-        if (href) window.location.href = href
-      })
-    })
-  }
-
-  initCommand()
-
-  document.addEventListener("astro:page-load", initCommand)
+  // Data Slot selection does not activate links. Preserve native navigation.
+  document.addEventListener(
+    "keydown",
+    (event) => {
+      if (
+        event.key !== "Enter" ||
+        event.defaultPrevented ||
+        event.isComposing ||
+        event.keyCode === 229
+      )
+        return
+      const input = event.target
+      if (
+        !(input instanceof HTMLInputElement) ||
+        input.dataset.slot !== "command-input"
+      )
+        return
+      const root = input.closest('[data-slot="command"]')
+      if (!root) return
+      const item = getParts<HTMLAnchorElement>(root, "command-item").find(
+        (item) =>
+          item.hasAttribute("data-selected") &&
+          item.hasAttribute("href") &&
+          item.getAttribute("aria-disabled") !== "true"
+      )
+      if (!item) return
+      event.preventDefault()
+      item.click()
+    },
+    true
+  )
 </script>

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

@@ -36,6 +36,12 @@ const {
 <script>
   import { create } from "@data-slot/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/drawer/drawer-close.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { ...props } = Astro.props
+---
+
+<Button data-slot="drawer-close" {...props}>
+  <slot />
+</Button>

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

@@ -0,0 +1,43 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import DrawerOverlay from "./drawer-overlay.astro"
+import DrawerPopup from "./drawer-popup.astro"
+import DrawerPortal from "./drawer-portal.astro"
+import DrawerSwipeHandle from "./drawer-swipe-handle.astro"
+import DrawerViewport from "./drawer-viewport.astro"
+
+type Props = ComponentProps<typeof DrawerPopup> & {
+  showOverlay?: boolean
+  showSwipeHandle?: boolean
+  container?: string
+  keepMounted?: boolean
+  overlayClass?: string
+  viewportClass?: string
+}
+
+const {
+  showOverlay = true,
+  showSwipeHandle = false,
+  container,
+  keepMounted,
+  overlayClass,
+  viewportClass,
+  ...props
+} = Astro.props
+---
+
+<DrawerPortal container={container} keepMounted={keepMounted}>
+  {showOverlay && <DrawerOverlay class={overlayClass} />}
+  <DrawerViewport class={viewportClass}>
+    <DrawerPopup {...props}>
+      {showSwipeHandle && <DrawerSwipeHandle />}
+      <div
+        data-slot="drawer-content"
+        class="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain rounded-[inherit] transition-opacity duration-300 select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+      >
+        <slot />
+      </div>
+    </DrawerPopup>
+  </DrawerViewport>
+</DrawerPortal>

package/src/components/ui/drawer/drawer-description.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"p">
+
+const { class: className, ...props } = Astro.props
+---
+
+<p
+  data-slot="drawer-description"
+  class={cn("text-muted-foreground text-sm text-balance", className)}
+  {...props}
+>
+  <slot />
+</p>

package/src/components/ui/drawer/drawer-footer.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-footer"
+  class={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-header.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-header"
+  class={cn("flex shrink-0 flex-col gap-1.5 p-4 pb-0", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-indent-background.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="drawer-indent-background" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-indent.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="drawer-indent" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-overlay.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, hidden = true, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-backdrop"
+  hidden={hidden}
+  class={cn(
+    "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-popup.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  initialFocus?: boolean | string
+  finalFocus?: boolean | string
+}
+
+const {
+  class: className,
+  initialFocus,
+  finalFocus,
+  hidden = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="drawer-popup"
+  data-initial-focus={initialFocus}
+  data-final-focus={finalFocus}
+  hidden={hidden}
+  class={cn(
+    "group/drawer-popup bg-popover text-popover-foreground pointer-events-auto fixed z-50 flex min-h-0 transform-gpu flex-col text-sm shadow-lg transition-[transform,height,opacity,filter] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95 data-swiping:duration-0",
+    "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:max-h-[calc(100dvh-3rem)] data-[swipe-direction=down]:[transform:translate3d(0,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-y,0px)),0)] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:data-ending-style:[transform:translate3d(0,calc(100%+2px),0)] data-[swipe-direction=down]:data-starting-style:[transform:translate3d(0,calc(100%+2px),0)]",
+    "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:max-h-[calc(100dvh-3rem)] data-[swipe-direction=up]:[transform:translate3d(0,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-y,0px)),0)] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:data-ending-style:[transform:translate3d(0,calc(-100%-2px),0)] data-[swipe-direction=up]:data-starting-style:[transform:translate3d(0,calc(-100%-2px),0)]",
+    "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-full data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:max-w-sm data-[swipe-direction=left]:[transform:translate3d(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-x,0px)),0,0)] data-[swipe-direction=left]:flex-row data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:data-ending-style:[transform:translate3d(calc(-100%-2px),0,0)] data-[swipe-direction=left]:data-starting-style:[transform:translate3d(calc(-100%-2px),0,0)]",
+    "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:max-w-sm data-[swipe-direction=right]:[transform:translate3d(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-amount-x,0px)),0,0)] data-[swipe-direction=right]:flex-row data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:data-ending-style:[transform:translate3d(calc(100%+2px),0,0)] data-[swipe-direction=right]:data-starting-style:[transform:translate3d(calc(100%+2px),0,0)]",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-portal.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div"> & {
+  container?: string
+  keepMounted?: boolean
+}
+
+const {
+  class: className,
+  container,
+  keepMounted,
+  hidden = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="drawer-portal"
+  data-container={container}
+  data-keep-mounted={keepMounted}
+  class={className}
+  hidden={hidden}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-provider.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="drawer-provider" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-swipe-handle.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-handle"
+  aria-hidden="true"
+  class={cn(
+    "after:bg-muted relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-swiping/drawer-popup:opacity-100 group-data-[swipe-direction=down]/drawer-popup:h-3 group-data-[swipe-direction=down]/drawer-popup:w-full group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=down]/drawer-popup:justify-center group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:h-full group-data-[swipe-direction=left]/drawer-popup:w-3 group-data-[swipe-direction=left]/drawer-popup:items-center group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:h-full group-data-[swipe-direction=right]/drawer-popup:w-3 group-data-[swipe-direction=right]/drawer-popup:items-center group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:h-3 group-data-[swipe-direction=up]/drawer-popup:w-full group-data-[swipe-direction=up]/drawer-popup:items-start group-data-[swipe-direction=up]/drawer-popup:justify-center after:block after:shrink-0 after:rounded-full group-data-[swipe-direction=down]/drawer-popup:after:h-1.5 group-data-[swipe-direction=down]/drawer-popup:after:w-24 group-data-[swipe-direction=left]/drawer-popup:after:h-24 group-data-[swipe-direction=left]/drawer-popup:after:w-1.5 group-data-[swipe-direction=right]/drawer-popup:after:h-24 group-data-[swipe-direction=right]/drawer-popup:after:w-1.5 group-data-[swipe-direction=up]/drawer-popup:after:h-1.5 group-data-[swipe-direction=up]/drawer-popup:after:w-24 active:cursor-grabbing",
+    className
+  )}
+  {...props}
+>
+</div>

package/src/components/ui/drawer/drawer-title.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h2">
+
+const { class: className, ...props } = Astro.props
+---
+
+<h2
+  data-slot="drawer-title"
+  class={cn("text-foreground font-medium", className)}
+  {...props}
+>
+  <slot />
+</h2>

package/src/components/ui/drawer/drawer-trigger.astro

@@ -0,0 +1,21 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button> & {
+  drawerTarget?: string
+  payload?: string
+}
+
+const { drawerTarget, payload, ...props } = Astro.props
+---
+
+<Button
+  data-slot="drawer-trigger"
+  data-drawer-target={drawerTarget}
+  data-payload={payload}
+  {...props}
+>
+  <slot />
+</Button>

package/src/components/ui/drawer/drawer-viewport.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, hidden = true, ...props } = Astro.props
+---
+
+<div
+  data-slot="drawer-viewport"
+  hidden={hidden}
+  class={cn(
+    "pointer-events-none fixed inset-0 z-50 min-h-dvh select-none",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer-virtual-keyboard-provider.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="drawer-virtual-keyboard-provider" class={className} {...props}>
+  <slot />
+</div>

package/src/components/ui/drawer/drawer.astro

@@ -0,0 +1,60 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { DrawerSnapPoint, DrawerSwipeDirection } from "@data-slot/drawer"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  modal?: boolean | "trap-focus"
+  disablePointerDismissal?: boolean
+  closeOnEscape?: boolean
+  swipeDirection?: DrawerSwipeDirection
+  snapPoint?: DrawerSnapPoint | null
+  defaultSnapPoint?: DrawerSnapPoint | null
+  triggerId?: string | null
+  defaultTriggerId?: string | null
+}
+
+const {
+  class: className,
+  defaultOpen,
+  modal,
+  disablePointerDismissal,
+  closeOnEscape,
+  swipeDirection,
+  snapPoint,
+  defaultSnapPoint,
+  triggerId,
+  defaultTriggerId,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="drawer"
+  data-default-open={defaultOpen}
+  data-modal={modal}
+  data-disable-pointer-dismissal={disablePointerDismissal}
+  data-close-on-escape={closeOnEscape}
+  data-swipe-direction={swipeDirection}
+  data-snap-point={snapPoint}
+  data-default-snap-point={defaultSnapPoint}
+  data-trigger-id={triggerId}
+  data-default-trigger-id={defaultTriggerId}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/drawer"
+
+  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/drawer/index.ts

@@ -0,0 +1,28 @@
+export { default as Drawer } from "./drawer.astro"
+export { default as DrawerTrigger } from "./drawer-trigger.astro"
+export { default as DrawerClose } from "./drawer-close.astro"
+export { default as DrawerPortal } from "./drawer-portal.astro"
+export { default as DrawerOverlay } from "./drawer-overlay.astro"
+export { default as DrawerBackdrop } from "./drawer-overlay.astro"
+export { default as DrawerViewport } from "./drawer-viewport.astro"
+export { default as DrawerPopup } from "./drawer-popup.astro"
+export { default as DrawerContent } from "./drawer-content.astro"
+export { default as DrawerSwipeHandle } from "./drawer-swipe-handle.astro"
+export { default as DrawerHeader } from "./drawer-header.astro"
+export { default as DrawerFooter } from "./drawer-footer.astro"
+export { default as DrawerTitle } from "./drawer-title.astro"
+export { default as DrawerDescription } from "./drawer-description.astro"
+export { default as DrawerProvider } from "./drawer-provider.astro"
+export { default as DrawerIndent } from "./drawer-indent.astro"
+export { default as DrawerIndentBackground } from "./drawer-indent-background.astro"
+export { default as DrawerVirtualKeyboardProvider } from "./drawer-virtual-keyboard-provider.astro"
+
+export type {
+  DrawerChangeDetails,
+  DrawerChangeReason,
+  DrawerController,
+  DrawerOptions,
+  DrawerSnapChangeDetails,
+  DrawerSnapPoint,
+  DrawerSwipeDirection,
+} from "@data-slot/drawer"

package/src/components/ui/dropdown-menu/dropdown-menu-content.astro

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

package/src/components/ui/dropdown-menu/dropdown-menu-item.astro

@@ -3,13 +3,16 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"button"> & {
-  disabled?: boolean
-  variant?: "default" | "destructive"
-  inset?: boolean
-}
+type Props = HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> & {
+    as?: "button" | "a"
+    disabled?: boolean
+    variant?: "default" | "destructive"
+    inset?: boolean
+  }
 
 const {
+  as: Tag = "href" in Astro.props ? "a" : "button",
   class: className,
   type = "button",
   disabled,
@@ -19,13 +22,13 @@ const {
 } = Astro.props
 ---
 
-<button
+<Tag
   data-slot="dropdown-menu-item"
   data-disabled={disabled}
   data-variant={variant}
   data-inset={inset}
-  disabled={disabled ? true : undefined}
-  type={type}
+  disabled={Tag === "button" && disabled ? true : undefined}
+  type={Tag === "button" ? type : undefined}
   class={cn(
     "group/dropdown-menu-item data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground not-data-[variant=destructive]:data-[highlighted]:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:bg-destructive/10 data-[variant=destructive]:data-[highlighted]:text-destructive dark:data-[variant=destructive]:data-[highlighted]:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
@@ -33,4 +36,32 @@ const {
   {...props}
 >
   <slot />
-</button>
+</Tag>
+
+<script>
+  // Data Slot owns selection; links also need native keyboard activation.
+  document.addEventListener(
+    "keydown",
+    (event) => {
+      if (
+        event.defaultPrevented ||
+        event.isComposing ||
+        !["Enter", " "].includes(event.key)
+      )
+        return
+      const item =
+        event.target instanceof Element
+          ? event.target.closest('[data-slot="dropdown-menu-item"][href]')
+          : null
+      if (
+        !(item instanceof HTMLAnchorElement) ||
+        item.getAttribute("aria-disabled") === "true"
+      )
+        return
+      event.preventDefault()
+      event.stopPropagation()
+      item.click()
+    },
+    true
+  )
+</script>

package/src/components/ui/dropdown-menu/dropdown-menu.astro

@@ -67,6 +67,12 @@ const defaultValuesAttr =
 <script>
   import { create } from "@data-slot/dropdown-menu"
 
-  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>