fulldev-ui 0.11.0 → 0.12.0

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>

package/src/components/ui/typography/typography.astro

@@ -126,7 +126,7 @@ const {
   [data-slot="typography"]
     > :is(p, blockquote, ul, ol, dl, table)
     a:not([data-slot]) {
-    @apply text-primary font-medium underline underline-offset-4;
+    @apply text-foreground font-medium underline underline-offset-4;
   }
 
   [data-slot="typography"] > blockquote {

package/src/styles/global.css

@@ -68,7 +68,7 @@
   --popover: oklch(0.269 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.686 0.2105 41.139);
-  --primary-foreground: oklch(1 0 0);
+  --primary-foreground: oklch(0.145 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
@@ -88,7 +88,7 @@
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.686 0.2105 41.139);
-  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.275 0 0);