fulldev-ui 0.9.3 → 0.10.1

package/src/components/ui/marquee/marquee.astro

@@ -1,81 +1,73 @@
 ---
-import { cva } from "class-variance-authority"
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-type Props = {
-  direction?: "left" | "right" | "top" | "bottom"
-  duration?: number | string
-  gap?: string
-  infinite?: boolean
-  pauseOnHover?: boolean
-  time?: number | string
-  variant?: "gradient" | "solid"
-  class?: string
-  style?: string
-}
+const trackVariants = cva(
+  "flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-['']",
+  {
+    variants: {
+      direction: {
+        left: "",
+        right: "[animation-direction:reverse]",
+      },
+      pauseOnHover: {
+        true: "group-hover/marquee:[animation-play-state:paused]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      direction: "left",
+      pauseOnHover: false,
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> &
+  VariantProps<typeof trackVariants> & {
+    duration?: string
+    gap?: string
+    infinite?: boolean
+  }
 
 const {
-  class: className = "",
-  direction = "left",
-  duration,
-  gap = "1rem",
+  class: className,
+  direction,
+  pauseOnHover,
+  duration = "40s",
+  gap = "1.5rem",
   infinite = true,
-  pauseOnHover = false,
   style,
-  time = 30,
-  variant = "gradient",
   ...props
 } = Astro.props
 
-const resolvedDuration = duration ?? time
-const styleValue = `--duration:${
-  typeof resolvedDuration === "number"
-    ? `${resolvedDuration}s`
-    : resolvedDuration
-}; --gap:${gap}; ${style ?? ""}`
-const contentClass = cn(
-  "marquee-content flex min-w-full shrink-0 justify-around gap-[var(--gap)] will-change-transform group-data-[direction=bottom]:[animation-direction:reverse] group-data-[direction=right]:[animation-direction:reverse] data-[direction=bottom]:min-h-full data-[direction=bottom]:flex-col data-[direction=top]:min-h-full data-[direction=top]:flex-col motion-reduce:[animation-play-state:paused]",
-  infinite &&
-    "animate-[marquee-x_var(--duration,20s)_linear_infinite] group-data-[direction=bottom]:animate-[marquee-y_var(--duration,20s)_linear_infinite] group-data-[direction=top]:animate-[marquee-y_var(--duration,20s)_linear_infinite]",
-  direction === "top" && "flex-col",
-  direction === "bottom" && "flex-col"
-)
-
-const marqueeVariants = cva("relative w-full", {
-  variants: {
-    variant: {
-      gradient:
-        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]",
-      solid: "",
-    },
-  },
-  defaultVariants: {
-    variant: "gradient",
-  },
-})
+const resolvedStyle = [
+  `--marquee-duration:${duration}`,
+  `--marquee-gap:${gap}`,
+  typeof style === "string" ? style : undefined,
+]
+  .filter(Boolean)
+  .join(";")
 ---
 
 <div
-  data-marquee
-  data-direction={direction}
-  data-pause-on-hover={pauseOnHover ? "true" : undefined}
   class={cn(
-    "",
-    // container utilities
-    "group flex w-full gap-[var(--gap)] overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col",
-    marqueeVariants({ variant }),
+    "group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]",
     className
   )}
-  style={styleValue}
+  style={resolvedStyle}
   {...props}
 >
-  <div class={contentClass}>
+  <div class={trackVariants({ direction, pauseOnHover })}>
     <slot />
   </div>
   {
     infinite && (
-      <div class={contentClass} aria-hidden="true">
+      <div
+        aria-hidden="true"
+        class={trackVariants({ direction, pauseOnHover })}
+      >
         <slot />
       </div>
     )
@@ -83,24 +75,13 @@ const marqueeVariants = cva("relative w-full", {
 </div>
 
 <style>
-  @keyframes marquee-x {
+  @keyframes marquee {
     from {
       transform: translateX(0);
     }
+
     to {
-      transform: translateX(calc(-100% - var(--gap)));
-    }
-  }
-  @keyframes marquee-y {
-    from {
-      transform: translateY(0);
-    }
-    to {
-      transform: translateY(calc(-100% - var(--gap)));
+      transform: translateX(-100%);
     }
   }
-
-  [data-marquee][data-pause-on-hover="true"]:hover .marquee-content {
-    animation-play-state: paused;
-  }
 </style>

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = Omit<HTMLAttributes<"select">, "size"> & {
   size?: "sm" | "default"
@@ -27,8 +27,7 @@ const { class: className, size = "default", ...props } = Astro.props
   >
     <slot />
   </select>
-  <Icon
-    name="chevron-down"
+  <ChevronDownIcon
     class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
     aria-hidden="true"
     data-slot="native-select-icon"

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

@@ -13,6 +13,7 @@ type Props = {
 
 const {
   class: className = "",
+  hidden = true,
   align,
   alignOffset,
   side,
@@ -24,12 +25,13 @@ const {
 <div
   {...props}
   data-slot="navigation-menu-content"
+  hidden={hidden}
   data-align={align}
   data-align-offset={alignOffset}
   data-side={side}
   data-side-offset={sideOffset}
   class={cn(
-    "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-2 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+    "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-2 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
     className
   )}
 >

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

@@ -10,8 +10,9 @@ const { class: className, ...props } = Astro.props
 
 <div
   data-slot="navigation-menu-indicator"
+  data-state="hidden"
   class={cn(
-    "data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+    "data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in absolute top-full left-(--indicator-left) z-1 flex h-1.5 w-(--indicator-width) items-end justify-center overflow-hidden data-[state=hidden]:invisible",
     className
   )}
   {...props}

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

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <ul
   data-slot="navigation-menu-list"
   class={cn(
-    "group flex flex-1 list-none items-center justify-center gap-1",
+    "group relative flex flex-1 list-none items-center justify-center gap-0",
     className
   )}
   {...props}

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

@@ -35,10 +35,12 @@ const {
   >
     <div
       data-slot="navigation-menu-popup"
+      hidden
       class="data-[ending-style]:easing-[ease] xs:w-(--popup-width) bg-popover text-popover-foreground ring-foreground/10 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0"
     >
       <div
         data-slot="navigation-menu-viewport"
+        hidden
         class="relative size-full overflow-hidden"
       >
       </div>

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 import navigationMenuTriggerStyle from "./navigation-menu-trigger-style"
 
@@ -19,8 +19,7 @@ const { class: className, type = "button", ...props } = Astro.props
 >
   <slot />
   {" "}
-  <Icon
-    name="chevron-down"
+  <ChevronDownIcon
     class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
     aria-hidden="true"
   />

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

@@ -48,7 +48,7 @@ const {
   data-safe-triangle={safeTriangle}
   data-debug-safe-triangle={debugSafeTriangle}
   class={cn(
-    "group/navigation-menu relative flex flex-1 items-center justify-center",
+    "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
     className
   )}
 >

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

@@ -51,7 +51,7 @@ const {
       data-position={position}
       hidden={hidden}
       class={cn(
-        "bg-popover text-popover-foreground ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 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 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 outline-none",
+        "bg-popover text-popover-foreground ring-foreground/10 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 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 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100",
         className
       )}
       {...props}

package/src/components/ui/radio-group/radio-group-item.astro

@@ -23,7 +23,7 @@ const {
   data-value={value}
   data-disabled={disabled ? "" : undefined}
   class={cn(
-    "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+    "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary group-has-[:focus-visible]/field-label:not-data-[checked]:border-input group-has-[:focus-visible]/field-label:data-[checked]:border-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
     className
   )}
   {...props}
@@ -32,12 +32,12 @@ const {
     aria-hidden="true"
     data-slot="radio-group-indicator"
     class={cn(
-      "flex size-4 items-center justify-center opacity-0 group-data-checked/radio-group-item:opacity-100",
+      "flex size-4 items-center justify-center opacity-0 group-data-[checked]/radio-group-item:opacity-100",
       indicatorClass
     )}
   >
     <span
-      class="bg-background absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+      class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
     ></span>
   </span>
 </span>

package/src/components/ui/rating/rating.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import Star from "@lucide/astro/icons/star"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   value?: number
@@ -23,13 +23,13 @@ const { value = 5, class: className, ...props } = Astro.props
 
       return (
         <span class="text-muted-foreground/25 relative inline-flex size-[1em]">
-          <Icon name="star" class="size-[1em] fill-current" />
+          <Star class="size-[1em] fill-current" />
           {fillPercentage > 0 && (
             <span
               class="text-primary absolute inset-0 overflow-hidden"
               style={{ width: `${fillPercentage}%` }}
             >
-              <Icon name="star" class="size-[1em] fill-current" />
+              <Star class="size-[1em] fill-current" />
             </span>
           )}
         </span>

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

@@ -60,7 +60,7 @@ const {
       <div
         data-slot="select-viewport"
         data-position={position}
-        class="p-1 data-[position=item-aligned]:w-full data-[position=popper]:min-w-36"
+        class="data-[position=item-aligned]:w-full data-[position=popper]:min-w-36"
       >
         <slot />
       </div>

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import CheckIcon from "@lucide/astro/icons/check"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   value?: string
@@ -19,7 +19,7 @@ const { class: className, value, disabled, label, ...props } = Astro.props
   data-disabled={disabled ? "true" : undefined}
   data-label={label}
   class={cn(
-    "group/select-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:[svg]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 *:data-[slot=select-item-text]:flex *:data-[slot=select-item-text]:shrink-0 *:data-[slot=select-item-text]:items-center *:data-[slot=select-item-text]:gap-2 *:data-[slot=select-item-text]:whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group/select-item data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:**:[svg]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 *:data-[slot=select-item-text]:flex *:data-[slot=select-item-text]:shrink-0 *:data-[slot=select-item-text]:items-center *:data-[slot=select-item-text]:gap-2 *:data-[slot=select-item-text]:whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
@@ -32,8 +32,8 @@ const { class: className, value, disabled, label, ...props } = Astro.props
   </span>
   <span
     aria-hidden="true"
-    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 group-data-selected/select-item:opacity-100"
+    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 group-data-[selected]/select-item:opacity-100"
   >
-    <Icon name="check" />
+    <CheckIcon />
   </span>
 </div>

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"button"> & {
   size?: "sm" | "default"
@@ -23,7 +23,7 @@ const {
   data-size={size}
   type={type}
   class={cn(
-    "border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-placeholder:text-muted-foreground flex w-full items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-placeholder:text-muted-foreground flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
@@ -31,10 +31,7 @@ const {
   <slot />
   {
     showIcon && (
-      <Icon
-        name="chevron-down"
-        class="text-muted-foreground pointer-events-none size-4"
-      />
+      <ChevronDownIcon class="text-muted-foreground pointer-events-none size-4" />
     )
   }
 </button>

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

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
   defaultValue?: string
+  defaultOpen?: boolean
   placeholder?: string
   disabled?: boolean
   required?: boolean
@@ -18,11 +19,13 @@ type Props = HTMLAttributes<"div"> & {
   avoidCollisions?: boolean
   collisionPadding?: number
   highlightItemOnHover?: boolean
+  lockScroll?: boolean
 }
 
 const {
   class: className,
   defaultValue,
+  defaultOpen,
   placeholder,
   disabled,
   required,
@@ -35,6 +38,7 @@ const {
   avoidCollisions,
   collisionPadding,
   highlightItemOnHover,
+  lockScroll,
   ...props
 } = Astro.props
 ---
@@ -42,6 +46,7 @@ const {
 <div
   data-slot="select"
   data-default-value={defaultValue}
+  data-default-open={defaultOpen}
   data-placeholder={placeholder}
   data-disabled={disabled}
   data-required={required}
@@ -54,6 +59,7 @@ const {
   data-avoid-collisions={avoidCollisions}
   data-collision-padding={collisionPadding}
   data-highlight-item-on-hover={highlightItemOnHover}
+  data-lock-scroll={lockScroll}
   class={cn(
     "group/select relative inline-flex w-fit flex-col gap-1.5",
     className

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

@@ -1,10 +1,10 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import DialogPortal from "@/components/ui/dialog/dialog-portal.astro"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   side?: "top" | "right" | "bottom" | "left"
@@ -25,7 +25,7 @@ const {
     data-slot="dialog-overlay"
     hidden
     class="fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs"
-    style="z-index: calc(var(--dialog-overlay-stack-index, 0) + 100);"
+    style="z-index: calc(var(--dialog-overlay-stack-index, 0) * 2 + 100);"
   >
   </div>
   <div
@@ -33,11 +33,10 @@ const {
     data-side={side}
     hidden
     class={cn(
-      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
-      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
       className
     )}
-    style={`z-index: calc(var(--dialog-content-stack-index, 0) + 101);${style ? ` ${style}` : ""}`}
+    style={`z-index: calc(var(--dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : ""}`}
     {...props}
   >
     <slot />
@@ -48,9 +47,9 @@ const {
           data-slot="dialog-close"
           variant="ghost"
           size="icon-sm"
-          class="absolute top-3 right-3"
+          class="absolute top-4 right-4"
         >
-          <Icon name="x" class="size-4" />
+          <XIcon />
           <span class="sr-only">Close</span>
         </Button>
       )

package/src/components/ui/sheet/sheet.astro

@@ -16,18 +16,15 @@ const {
   lockScroll,
   ...props
 } = Astro.props
-
-const manageScrollLock = lockScroll !== false
 ---
 
 <div
   data-slot="dialog"
-  data-sheet-lock-scroll={manageScrollLock ? "" : undefined}
   class={className}
   data-default-open={defaultOpen}
   data-close-on-click-outside={closeOnClickOutside}
   data-close-on-escape={closeOnEscape}
-  data-lock-scroll="false"
+  data-lock-scroll={lockScroll}
   {...props}
 >
   <slot />
@@ -37,89 +34,4 @@ const manageScrollLock = lockScroll !== false
   import { create } from "@data-slot/dialog"
 
   create()
-
-  declare global {
-    interface Window {
-      __fulldevSheetScrollLock?: {
-        roots: Set<HTMLElement>
-        savedHtmlOverflow: string
-        savedHtmlScrollbarGutter: string
-        savedBodyPaddingRight: string
-      }
-      __fulldevSheetScrollLockBound?: boolean
-    }
-  }
-
-  const state =
-    window.__fulldevSheetScrollLock ??
-    (window.__fulldevSheetScrollLock = {
-      roots: new Set<HTMLElement>(),
-      savedHtmlOverflow: "",
-      savedHtmlScrollbarGutter: "",
-      savedBodyPaddingRight: "",
-    })
-
-  const applyScrollLock = () => {
-    const html = document.documentElement
-    const body = document.body
-
-    if (state.roots.size === 0) {
-      html.style.overflow = state.savedHtmlOverflow
-      html.style.scrollbarGutter = state.savedHtmlScrollbarGutter
-      body.style.paddingRight = state.savedBodyPaddingRight
-      return
-    }
-
-    if (state.roots.size === 1) {
-      state.savedHtmlOverflow = html.style.overflow
-      state.savedHtmlScrollbarGutter = html.style.scrollbarGutter
-      state.savedBodyPaddingRight = body.style.paddingRight
-    }
-
-    const scrollbarWidth = window.innerWidth - html.clientWidth
-    const bodyPaddingRight = Number.parseFloat(
-      window.getComputedStyle(body).paddingRight || "0"
-    )
-
-    html.style.overflow = "hidden"
-    html.style.scrollbarGutter = "auto"
-    body.style.paddingRight = `${bodyPaddingRight + Math.max(scrollbarWidth, 0)}px`
-  }
-
-  const syncRoot = (root: HTMLElement, open: boolean) => {
-    const hasRoot = state.roots.has(root)
-    if (open === hasRoot) return
-
-    if (open) state.roots.add(root)
-    else state.roots.delete(root)
-
-    applyScrollLock()
-  }
-
-  if (!window.__fulldevSheetScrollLockBound) {
-    window.__fulldevSheetScrollLockBound = true
-
-    document.addEventListener("dialog:change", (event) => {
-      const target = event.target
-
-      if (
-        !(target instanceof HTMLElement) ||
-        target.dataset.slot !== "dialog" ||
-        target.dataset.sheetLockScroll === undefined
-      ) {
-        return
-      }
-
-      const detail = (event as CustomEvent<{ open?: boolean }>).detail
-      syncRoot(target, Boolean(detail?.open))
-    })
-  }
-
-  document
-    .querySelectorAll<HTMLElement>(
-      '[data-slot="dialog"][data-sheet-lock-scroll]'
-    )
-    .forEach((root) => {
-      syncRoot(root, root.hasAttribute("data-open"))
-    })
 </script>