fulldev-ui 0.11.1 → 0.12.0

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/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>

package/src/components/ui/hover-card/hover-card-content.astro

@@ -34,7 +34,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="hover-card-content"

package/src/components/ui/hover-card/hover-card.astro

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
+  mountStrategy?: "lazy" | "eager"
   defaultOpen?: boolean
   open?: boolean
   delay?: number
@@ -21,6 +22,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  mountStrategy,
   class: className,
   defaultOpen,
   open,
@@ -42,6 +44,7 @@ const {
 
 <div
   data-slot="hover-card"
+  data-mount-strategy={mountStrategy}
   data-default-open={defaultOpen}
   data-controlled-open={open}
   data-delay={delay}
@@ -63,14 +66,22 @@ const {
 </div>
 
 <script>
-  import { getDataBool } from "@data-slot/core"
+  import { getDataBool, getRoots, hasRootBinding } from "@data-slot/core"
   import { createHoverCard } from "@data-slot/hover-card"
 
+  const controllers: ReturnType<typeof createHoverCard>[] = []
   const initialize = () => {
-    document.querySelectorAll('[data-slot="hover-card"]').forEach((root) => {
-      createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
-    })
+    for (const root of getRoots(document, "hover-card")) {
+      if (hasRootBinding(root, "@data-slot/hover-card")) continue
+      controllers.push(
+        createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
+      )
+    }
   }
   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/navigation-menu/navigation-menu-positioner.astro

@@ -29,7 +29,7 @@ const {
     data-align={align}
     data-align-offset={alignOffset}
     class={cn(
-      "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+      "isolate z-[1000] h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
       className
     )}
   >

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

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 import NavigationMenuPositioner from "./navigation-menu-positioner.astro"
 
 type Props = HTMLAttributes<"nav"> & {
+  mountStrategy?: "lazy" | "eager"
   delayOpen?: number
   delayClose?: number
   openOnFocus?: boolean
@@ -19,6 +20,7 @@ type Props = HTMLAttributes<"nav"> & {
 }
 
 const {
+  mountStrategy,
   class: className = "",
   delayOpen = 0,
   delayClose = 0,
@@ -37,6 +39,7 @@ const {
 <nav
   {...props}
   data-slot="navigation-menu"
+  data-mount-strategy={mountStrategy}
   data-delay-open={delayOpen}
   data-delay-close={delayClose}
   data-open-on-focus={openOnFocus}
@@ -59,6 +62,12 @@ const {
 <script>
   import { create } from "@data-slot/navigation-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>

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

@@ -11,6 +11,7 @@ type Props = HTMLAttributes<"div"> & {
   alignOffset?: number
   avoidCollisions?: boolean
   collisionPadding?: number
+  /** Compatibility alias. Prefer `side`. */
   position?: PopoverSide
 }
 
@@ -38,7 +39,7 @@ const {
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
     data-position={position}
-    class="isolate z-50"
+    class="isolate z-[1000]"
   >
     <div
       data-slot="popover-content"

package/src/components/ui/popover/popover.astro

@@ -11,6 +11,7 @@ type Props = HTMLAttributes<"div"> & {
   avoidCollisions?: boolean
   collisionPadding?: number
   portal?: boolean
+  /** Compatibility alias. Prefer `side`. */
   position?: PopoverSide
   closeOnClickOutside?: boolean
   closeOnEscape?: boolean
@@ -55,6 +56,12 @@ const {
 <script>
   import { create } from "@data-slot/popover"
 
-  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/radio-group/radio-group.astro

@@ -38,6 +38,12 @@ const {
 <script>
   import { create } from "@data-slot/radio-group"
 
-  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/select/select-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="select-content"
@@ -52,7 +52,7 @@ const {
       data-collision-padding={collisionPadding}
       hidden={hidden}
       class={cn(
-        "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 outline-none data-[align-trigger=true]:animate-none",
+        "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-[1000] max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 outline-none data-[align-trigger=true]:animate-none",
         className
       )}
       {...props}

package/src/components/ui/select/select.astro

@@ -5,6 +5,7 @@ import type { Align, Position, Side } from "@data-slot/select"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
+  mountStrategy?: "lazy" | "eager"
   defaultValue?: string
   defaultOpen?: boolean
   placeholder?: string
@@ -23,6 +24,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  mountStrategy,
   class: className,
   defaultValue,
   defaultOpen,
@@ -45,6 +47,7 @@ const {
 
 <div
   data-slot="select"
+  data-mount-strategy={mountStrategy}
   data-default-value={defaultValue}
   data-default-open={defaultOpen}
   data-placeholder={placeholder}
@@ -72,11 +75,12 @@ const {
 <script>
   import { create } from "@data-slot/select"
 
-  const initSelect = () => {
-    create()
-  }
-
-  initSelect()
-
-  document.addEventListener("astro:page-load", initSelect)
+  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/sheet/sheet.astro

@@ -33,6 +33,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/slider/slider.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type SliderValue = number | [number, number] | string
+type SliderValue = number | [number, number]
 type ThumbAlignment = "center" | "edge" | "edge-client-only"
 
 type Props = HTMLAttributes<"div"> & {
@@ -25,7 +25,7 @@ const {
   step,
   largeStep,
   orientation = "horizontal",
-  thumbAlignment = "edge",
+  thumbAlignment = "center",
   disabled,
   ...props
 } = Astro.props
@@ -82,6 +82,12 @@ const thumbCount = String(serializedDefaultValue ?? "").includes(",") ? 2 : 1
 <script>
   import { create } from "@data-slot/slider"
 
-  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/switch/switch.astro

@@ -69,6 +69,12 @@ const switchSizeStyle = {
 <script>
   import { create } from "@data-slot/switch"
 
-  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/tabs/tabs-content.astro

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
-  value?: string
+  value: string
 }
 
 const { class: className, hidden = true, value, ...props } = Astro.props

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

@@ -4,14 +4,15 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"button"> & {
-  value?: string
+  value: string
 }
 
-const { class: className, value, ...props } = Astro.props
+const { class: className, value, type = "button", ...props } = Astro.props
 ---
 
 <button
   data-slot="tabs-trigger"
+  type={type}
   data-value={value}
   class={cn(
     "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/src/components/ui/tabs/tabs.astro

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

@@ -38,6 +38,12 @@ const {
 <script>
   import { create } from "@data-slot/toggle"
 
-  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/tooltip/tooltip-content.astro

@@ -35,7 +35,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="tooltip-content"

package/src/components/ui/tooltip/tooltip.astro

@@ -5,6 +5,7 @@ import type { TooltipAlign, TooltipSide } from "@data-slot/tooltip"
 import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
+  mountStrategy?: "lazy" | "eager"
   delay?: number
   skipDelayDuration?: number
   side?: TooltipSide
@@ -17,6 +18,7 @@ type Props = HTMLAttributes<"div"> & {
 }
 
 const {
+  mountStrategy,
   class: className,
   delay = 300,
   skipDelayDuration = 300,
@@ -33,6 +35,7 @@ const {
 
 <div
   data-slot="tooltip"
+  data-mount-strategy={mountStrategy}
   data-delay={delay}
   data-skip-delay-duration={skipDelayDuration}
   data-side={side}
@@ -51,6 +54,12 @@ const {
 <script>
   import { create } from "@data-slot/tooltip"
 
-  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>