fulldev-ui 0.11.0 → 0.12.0

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>
@@ -325,7 +327,7 @@ try {
             </BreadcrumbList>
           </Breadcrumb>
         </HeaderGroup>
-        <HeaderGroup>
+        <HeaderGroup class="shrink-0">
           <Button
             as="a"
             href={`https://github.com/${githubRepo}`}
@@ -336,7 +338,7 @@ try {
             aria-label={`View ${githubRepo} on GitHub`}
           >
             <Icon name="github" />
-            <span>{githubStars}</span>
+            <span class="hidden sm:inline">{githubStars}</span>
           </Button>
           <ThemeToggle />
         </HeaderGroup>

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/banner/banner.astro

@@ -35,51 +35,33 @@ const { class: className, variant, storageKey, ...props } = Astro.props
   <slot />
 </aside>
 
-<script is:inline>
-  const initializedKey = "fulldevBannerInitialized"
-
-  if (!document.documentElement.dataset[initializedKey]) {
-    document.documentElement.dataset[initializedKey] = "true"
-
-    const getStorageToken = (key) => `banner:${key}`
-
-    const syncBanners = () => {
-      document.querySelectorAll("[data-slot='banner']").forEach((banner) => {
-        if (!(banner instanceof HTMLElement)) return
-
-        const storageKey = banner.dataset.bannerStorageKey
-
-        if (
-          storageKey &&
-          sessionStorage.getItem(getStorageToken(storageKey)) === "hidden"
-        ) {
-          banner.hidden = true
-        }
-      })
-    }
-
-    syncBanners()
-
-    document.addEventListener("click", (event) => {
-      const target = event.target
-
-      if (!(target instanceof Element)) return
-
-      const closeButton = target.closest("[data-slot='banner-close']")
-
-      if (!(closeButton instanceof HTMLElement)) return
-
-      const banner = closeButton.closest("[data-slot='banner']")
+<script>
+  const getStorageToken = (key: string) => `banner:${key}`
 
+  const syncBanners = () => {
+    document.querySelectorAll("[data-slot='banner']").forEach((banner) => {
       if (!(banner instanceof HTMLElement)) return
-
-      banner.hidden = true
-
       const storageKey = banner.dataset.bannerStorageKey
-
-      if (storageKey) {
-        sessionStorage.setItem(getStorageToken(storageKey), "hidden")
+      if (
+        storageKey &&
+        sessionStorage.getItem(getStorageToken(storageKey)) === "hidden"
+      ) {
+        banner.hidden = true
       }
     })
   }
+
+  syncBanners()
+  document.addEventListener("astro:page-load", syncBanners)
+
+  document.addEventListener("click", (event) => {
+    if (!(event.target instanceof Element)) return
+    const closeButton = event.target.closest("[data-slot='banner-close']")
+    const banner = closeButton?.closest("[data-slot='banner']")
+    if (!(banner instanceof HTMLElement)) return
+    banner.hidden = true
+    const storageKey = banner.dataset.bannerStorageKey
+    if (storageKey)
+      sessionStorage.setItem(getStorageToken(storageKey), "hidden")
+  })
 </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>

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>