fulldev-ui 0.10.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Fulldev UI
 
+## 0.10.1
+
+### Patch Changes
+
+- [#184](https://github.com/fulldotdev/ui/pull/184) [`b4c6557`](https://github.com/fulldotdev/ui/commit/b4c6557df695a167c5ecb38761f65f809bdca918) Thanks [@silveltman](https://github.com/silveltman)! - Prevent navigation and inactive panels flashing before initialization. Correct Sidebar slot composition and state synchronization, use Data Slot's native Sheet scroll locking, align modal stack styles, and fix controlled HoverCard initialization, string range sliders and initial control states. Align Combobox examples with the documented list structure.
+
 ## 0.10.0
 
 ### Minor Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fulldev-ui",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Open-source Astro UI components and blocks",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/public/r/accordion.json

@@ -13,7 +13,7 @@
     },
     {
       "path": "src/components/ui/accordion/accordion-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"accordion-content\"\n  class=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n  {...props}\n>\n  <div\n    data-slot=\"accordion-content-inner\"\n    class={cn(\n      \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n      className\n    )}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, hidden = true, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"accordion-content\"\n  hidden={hidden}\n  class=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n  {...props}\n>\n  <div\n    data-slot=\"accordion-content-inner\"\n    class={cn(\n      \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n      className\n    )}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {

package/public/r/alert-dialog.json

@@ -25,12 +25,12 @@
     },
     {
       "path": "src/components/ui/alert-dialog/alert-dialog-overlay.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, style, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog-overlay\"\n  hidden\n  class={cn(\n    \"data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-(--alert-dialog-overlay-stack-index) bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n    className\n  )}\n  style={`z-index: calc(var(--alert-dialog-overlay-stack-index, 0) + 110);${style ? ` ${style}` : \"\"}`}\n  {...props}\n>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, style, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog-overlay\"\n  hidden\n  class={cn(\n    \"data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-(--alert-dialog-overlay-stack-index) bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n    className\n  )}\n  style={`z-index: calc(var(--alert-dialog-overlay-stack-index, 0) * 2 + 100);${style ? ` ${style}` : \"\"}`}\n  {...props}\n>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/alert-dialog/alert-dialog-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport AlertDialogOverlay from \"@/components/ui/alert-dialog/alert-dialog-overlay.astro\"\nimport AlertDialogPortal from \"@/components/ui/alert-dialog/alert-dialog-portal.astro\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  size?: \"default\" | \"sm\"\n}\n\nconst { class: className, size = \"default\", style, ...props } = Astro.props\n---\n\n<AlertDialogPortal>\n  <AlertDialogOverlay />\n  <div\n    data-slot=\"alert-dialog-content\"\n    data-size={size}\n    hidden\n    class={cn(\n      \"group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg\",\n      className\n    )}\n    style={`z-index: calc(var(--alert-dialog-content-stack-index, 0) + 111);${style ? ` ${style}` : \"\"}`}\n    {...props}\n  >\n    <slot />\n  </div>\n</AlertDialogPortal>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport AlertDialogOverlay from \"@/components/ui/alert-dialog/alert-dialog-overlay.astro\"\nimport AlertDialogPortal from \"@/components/ui/alert-dialog/alert-dialog-portal.astro\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  size?: \"default\" | \"sm\"\n}\n\nconst { class: className, size = \"default\", style, ...props } = Astro.props\n---\n\n<AlertDialogPortal>\n  <AlertDialogOverlay />\n  <div\n    data-slot=\"alert-dialog-content\"\n    data-size={size}\n    hidden\n    class={cn(\n      \"group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg\",\n      className\n    )}\n    style={`z-index: calc(var(--alert-dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : \"\"}`}\n    {...props}\n  >\n    <slot />\n  </div>\n</AlertDialogPortal>\n",
       "type": "registry:ui"
     },
     {

package/public/r/dialog.json

@@ -26,12 +26,12 @@
     },
     {
       "path": "src/components/ui/dialog/dialog-overlay.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, style, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dialog-overlay\"\n  hidden\n  class={cn(\n    \"data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n    className\n  )}\n  style={`z-index: calc(var(--dialog-overlay-stack-index, 0) + 100);${style ? ` ${style}` : \"\"}`}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, style, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dialog-overlay\"\n  hidden\n  class={cn(\n    \"data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n    className\n  )}\n  style={`z-index: calc(var(--dialog-overlay-stack-index, 0) * 2 + 100);${style ? ` ${style}` : \"\"}`}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dialog/dialog-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport DialogOverlay from \"@/components/ui/dialog/dialog-overlay.astro\"\nimport DialogPortal from \"@/components/ui/dialog/dialog-portal.astro\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showCloseButton?: boolean\n}\n\nconst {\n  class: className,\n  showCloseButton = true,\n  style,\n  ...props\n} = Astro.props\n---\n\n<DialogPortal>\n  <DialogOverlay />\n  <div\n    data-slot=\"dialog-content\"\n    hidden\n    class={cn(\n      \"bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md\",\n      className\n    )}\n    style={`z-index: calc(var(--dialog-content-stack-index, 0) + 101);${style ? ` ${style}` : \"\"}`}\n    {...props}\n  >\n    {\n      showCloseButton && (\n        <Button\n          type=\"button\"\n          data-slot=\"dialog-close\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">Close</span>\n        </Button>\n      )\n    }\n    <slot />\n  </div>\n</DialogPortal>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport DialogOverlay from \"@/components/ui/dialog/dialog-overlay.astro\"\nimport DialogPortal from \"@/components/ui/dialog/dialog-portal.astro\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showCloseButton?: boolean\n}\n\nconst {\n  class: className,\n  showCloseButton = true,\n  style,\n  ...props\n} = Astro.props\n---\n\n<DialogPortal>\n  <DialogOverlay />\n  <div\n    data-slot=\"dialog-content\"\n    hidden\n    class={cn(\n      \"bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md\",\n      className\n    )}\n    style={`z-index: calc(var(--dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : \"\"}`}\n    {...props}\n  >\n    {\n      showCloseButton && (\n        <Button\n          type=\"button\"\n          data-slot=\"dialog-close\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">Close</span>\n        </Button>\n      )\n    }\n    <slot />\n  </div>\n</DialogPortal>\n",
       "type": "registry:ui"
     },
     {

package/public/r/hover-card.json

@@ -2,12 +2,13 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hover-card",
   "dependencies": [
-    "@data-slot/hover-card"
+    "@data-slot/hover-card",
+    "@data-slot/core"
   ],
   "files": [
     {
       "path": "src/components/ui/hover-card/hover-card.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  delay?: number\n  skipDelayDuration?: number\n  closeDelay?: number\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  portal?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  open,\n  delay = 700,\n  skipDelayDuration = 300,\n  closeDelay = 300,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  alignOffset = 0,\n  avoidCollisions = true,\n  collisionPadding = 8,\n  portal = true,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"hover-card\"\n  data-default-open={defaultOpen}\n  data-open={open}\n  data-delay={delay}\n  data-skip-delay-duration={skipDelayDuration}\n  data-close-delay={closeDelay}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-portal={portal}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/hover-card\"\n\n  create()\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  delay?: number\n  skipDelayDuration?: number\n  closeDelay?: number\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  portal?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  open,\n  delay = 700,\n  skipDelayDuration = 300,\n  closeDelay = 300,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  alignOffset = 0,\n  avoidCollisions = true,\n  collisionPadding = 8,\n  portal = true,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"hover-card\"\n  data-default-open={defaultOpen}\n  data-controlled-open={open}\n  data-delay={delay}\n  data-skip-delay-duration={skipDelayDuration}\n  data-close-delay={closeDelay}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-portal={portal}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { getDataBool } from \"@data-slot/core\"\n  import { createHoverCard } from \"@data-slot/hover-card\"\n\n  document.querySelectorAll('[data-slot=\"hover-card\"]').forEach((root) => {\n    createHoverCard(root, { open: getDataBool(root, \"controlledOpen\") })\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/navigation-menu.json

@@ -13,7 +13,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = {\n  class?: string\n  align?: \"start\" | \"center\" | \"end\"\n  alignOffset?: number\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  sideOffset?: number\n} & HTMLAttributes<\"div\">\n\nconst {\n  class: className = \"\",\n  align,\n  alignOffset,\n  side,\n  sideOffset,\n  ...props\n} = Astro.props\n---\n\n<div\n  {...props}\n  data-slot=\"navigation-menu-content\"\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  class={cn(\n    \"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\",\n    className\n  )}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = {\n  class?: string\n  align?: \"start\" | \"center\" | \"end\"\n  alignOffset?: number\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  sideOffset?: number\n} & HTMLAttributes<\"div\">\n\nconst {\n  class: className = \"\",\n  hidden = true,\n  align,\n  alignOffset,\n  side,\n  sideOffset,\n  ...props\n} = Astro.props\n---\n\n<div\n  {...props}\n  data-slot=\"navigation-menu-content\"\n  hidden={hidden}\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  class={cn(\n    \"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\",\n    className\n  )}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-list.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"ul\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<ul\n  data-slot=\"navigation-menu-list\"\n  class={cn(\n    \"group flex flex-1 list-none items-center justify-center gap-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</ul>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"ul\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<ul\n  data-slot=\"navigation-menu-list\"\n  class={cn(\n    \"group relative flex flex-1 list-none items-center justify-center gap-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</ul>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-indicator.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"navigation-menu-indicator\"\n  class={cn(\n    \"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\",\n    className\n  )}\n  {...props}\n>\n  <div\n    class=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\"\n  >\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"navigation-menu-indicator\"\n  data-state=\"hidden\"\n  class={cn(\n    \"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\",\n    className\n  )}\n  {...props}\n>\n  <div\n    class=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\"\n  >\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
@@ -48,7 +48,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-positioner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  sideOffset?: number\n  align?: \"start\" | \"center\" | \"end\"\n  alignOffset?: number\n}\n\nconst {\n  class: className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n} = Astro.props\n---\n\n<div data-slot=\"navigation-menu-portal\">\n  <div\n    {...props}\n    data-slot=\"navigation-menu-positioner\"\n    data-side={side}\n    data-side-offset={sideOffset}\n    data-align={align}\n    data-align-offset={alignOffset}\n    class={cn(\n      \"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\",\n      className\n    )}\n  >\n    <div\n      data-slot=\"navigation-menu-popup\"\n      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\"\n    >\n      <div\n        data-slot=\"navigation-menu-viewport\"\n        class=\"relative size-full overflow-hidden\"\n      >\n      </div>\n    </div>\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  sideOffset?: number\n  align?: \"start\" | \"center\" | \"end\"\n  alignOffset?: number\n}\n\nconst {\n  class: className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n} = Astro.props\n---\n\n<div data-slot=\"navigation-menu-portal\">\n  <div\n    {...props}\n    data-slot=\"navigation-menu-positioner\"\n    data-side={side}\n    data-side-offset={sideOffset}\n    data-align={align}\n    data-align-offset={alignOffset}\n    class={cn(\n      \"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\",\n      className\n    )}\n  >\n    <div\n      data-slot=\"navigation-menu-popup\"\n      hidden\n      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\"\n    >\n      <div\n        data-slot=\"navigation-menu-viewport\"\n        hidden\n        class=\"relative size-full overflow-hidden\"\n      >\n      </div>\n    </div>\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {

package/public/r/registry.json

@@ -637,7 +637,7 @@
     {
       "name": "hover-card",
       "type": "registry:ui",
-      "dependencies": ["@data-slot/hover-card"],
+      "dependencies": ["@data-slot/hover-card", "@data-slot/core"],
       "files": [
         {
           "path": "src/components/ui/hover-card/hover-card.astro",

package/public/r/sheet.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/sheet/sheet.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst manageScrollLock = lockScroll !== false\n---\n\n<div\n  data-slot=\"dialog\"\n  data-sheet-lock-scroll={manageScrollLock ? \"\" : undefined}\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll=\"false\"\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  create()\n\n  declare global {\n    interface Window {\n      __fulldevSheetScrollLock?: {\n        roots: Set<HTMLElement>\n        savedHtmlOverflow: string\n        savedHtmlScrollbarGutter: string\n        savedBodyPaddingRight: string\n      }\n      __fulldevSheetScrollLockBound?: boolean\n    }\n  }\n\n  const state =\n    window.__fulldevSheetScrollLock ??\n    (window.__fulldevSheetScrollLock = {\n      roots: new Set<HTMLElement>(),\n      savedHtmlOverflow: \"\",\n      savedHtmlScrollbarGutter: \"\",\n      savedBodyPaddingRight: \"\",\n    })\n\n  const applyScrollLock = () => {\n    const html = document.documentElement\n    const body = document.body\n\n    if (state.roots.size === 0) {\n      html.style.overflow = state.savedHtmlOverflow\n      html.style.scrollbarGutter = state.savedHtmlScrollbarGutter\n      body.style.paddingRight = state.savedBodyPaddingRight\n      return\n    }\n\n    if (state.roots.size === 1) {\n      state.savedHtmlOverflow = html.style.overflow\n      state.savedHtmlScrollbarGutter = html.style.scrollbarGutter\n      state.savedBodyPaddingRight = body.style.paddingRight\n    }\n\n    const scrollbarWidth = window.innerWidth - html.clientWidth\n    const bodyPaddingRight = Number.parseFloat(\n      window.getComputedStyle(body).paddingRight || \"0\"\n    )\n\n    html.style.overflow = \"hidden\"\n    html.style.scrollbarGutter = \"auto\"\n    body.style.paddingRight = `${bodyPaddingRight + Math.max(scrollbarWidth, 0)}px`\n  }\n\n  const syncRoot = (root: HTMLElement, open: boolean) => {\n    const hasRoot = state.roots.has(root)\n    if (open === hasRoot) return\n\n    if (open) state.roots.add(root)\n    else state.roots.delete(root)\n\n    applyScrollLock()\n  }\n\n  if (!window.__fulldevSheetScrollLockBound) {\n    window.__fulldevSheetScrollLockBound = true\n\n    document.addEventListener(\"dialog:change\", (event) => {\n      const target = event.target\n\n      if (\n        !(target instanceof HTMLElement) ||\n        target.dataset.slot !== \"dialog\" ||\n        target.dataset.sheetLockScroll === undefined\n      ) {\n        return\n      }\n\n      const detail = (event as CustomEvent<{ open?: boolean }>).detail\n      syncRoot(target, Boolean(detail?.open))\n    })\n  }\n\n  document\n    .querySelectorAll<HTMLElement>(\n      '[data-slot=\"dialog\"][data-sheet-lock-scroll]'\n    )\n    .forEach((root) => {\n      syncRoot(root, root.hasAttribute(\"data-open\"))\n    })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"dialog\"\n  class={className}\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dialog\"\n\n  create()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -22,7 +22,7 @@
     },
     {
       "path": "src/components/ui/sheet/sheet-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport DialogPortal from \"@/components/ui/dialog/dialog-portal.astro\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}\n\nconst {\n  class: className,\n  side = \"right\",\n  showCloseButton = true,\n  style,\n  ...props\n} = Astro.props\n---\n\n<DialogPortal>\n  <div\n    data-slot=\"dialog-overlay\"\n    hidden\n    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\"\n    style=\"z-index: calc(var(--dialog-overlay-stack-index, 0) + 100);\"\n  >\n  </div>\n  <div\n    data-slot=\"dialog-content\"\n    data-side={side}\n    hidden\n    class={cn(\n      \"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\",\n      className\n    )}\n    style={`z-index: calc(var(--dialog-content-stack-index, 0) + 101);${style ? ` ${style}` : \"\"}`}\n    {...props}\n  >\n    <slot />\n    {\n      showCloseButton && (\n        <Button\n          type=\"button\"\n          data-slot=\"dialog-close\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">Close</span>\n        </Button>\n      )\n    }\n  </div>\n</DialogPortal>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport DialogPortal from \"@/components/ui/dialog/dialog-portal.astro\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}\n\nconst {\n  class: className,\n  side = \"right\",\n  showCloseButton = true,\n  style,\n  ...props\n} = Astro.props\n---\n\n<DialogPortal>\n  <div\n    data-slot=\"dialog-overlay\"\n    hidden\n    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\"\n    style=\"z-index: calc(var(--dialog-overlay-stack-index, 0) * 2 + 100);\"\n  >\n  </div>\n  <div\n    data-slot=\"dialog-content\"\n    data-side={side}\n    hidden\n    class={cn(\n      \"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\",\n      className\n    )}\n    style={`z-index: calc(var(--dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : \"\"}`}\n    {...props}\n  >\n    <slot />\n    {\n      showCloseButton && (\n        <Button\n          type=\"button\"\n          data-slot=\"dialog-close\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">Close</span>\n        </Button>\n      )\n    }\n  </div>\n</DialogPortal>\n",
       "type": "registry:ui"
     },
     {

package/public/r/sidebar.json

@@ -17,12 +17,12 @@
   "files": [
     {
       "path": "src/components/ui/sidebar/sidebar-provider.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst {\n  class: className,\n  style,\n  defaultOpen = true,\n  open,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--sidebar-width: ${SIDEBAR_WIDTH}`,\n  `--sidebar-width-mobile: ${SIDEBAR_WIDTH_MOBILE}`,\n  `--sidebar-width-icon: ${SIDEBAR_WIDTH_ICON}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\"; \")\n---\n\n<div\n  data-slot=\"sidebar-wrapper\"\n  data-default-open={defaultOpen ? \"true\" : \"false\"}\n  data-open={open === undefined ? undefined : open ? \"true\" : \"false\"}\n  style={resolvedStyle}\n  class={cn(\n    \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  <script is:inline>\n    ;(() => {\n      window.__fulldevSyncSidebarProvider ??= (provider, open) => {\n        const state = open ? \"expanded\" : \"collapsed\"\n        const sidebar = provider.querySelector(\n          \"[data-slot='sidebar']:not([data-mobile='true'])\"\n        )\n        const collapsible = sidebar?.dataset.sidebarCollapsible ?? \"offcanvas\"\n\n        provider.dataset.open = open ? \"true\" : \"false\"\n        provider.dataset.state = state\n\n        if (sidebar) {\n          sidebar.dataset.state = collapsible === \"none\" ? \"expanded\" : state\n          sidebar.dataset.collapsible =\n            collapsible === \"none\" ? \"none\" : open ? \"\" : collapsible\n        }\n\n        provider\n          .querySelectorAll(\"[data-sidebar='trigger'], [data-sidebar='rail']\")\n          .forEach((control) => {\n            control.setAttribute(\"aria-expanded\", String(open))\n          })\n\n        provider\n          .querySelectorAll(\"[data-sidebar='menu-tooltip']\")\n          .forEach((tooltip) => {\n            tooltip.hidden = state !== \"collapsed\"\n          })\n      }\n\n      const provider = document.currentScript?.closest(\n        \"[data-slot='sidebar-wrapper']\"\n      )\n      if (!(provider instanceof HTMLElement)) return\n\n      const controlledOpen = provider.dataset.open\n      const cookieValue = document.cookie\n        .split(\"; \")\n        .find((entry) => entry.startsWith(\"sidebar_state=\"))\n        ?.slice(\"sidebar_state=\".length)\n\n      const isOpen =\n        controlledOpen === \"true\" || controlledOpen === \"false\"\n          ? controlledOpen === \"true\"\n          : cookieValue === \"true\" || cookieValue === \"false\"\n            ? cookieValue === \"true\"\n            : provider.dataset.defaultOpen !== \"false\"\n\n      provider.dataset.openMobile = \"false\"\n      window.__fulldevSyncSidebarProvider(provider, isOpen)\n    })()\n  </script>\n</div>\n\n<script is:inline>\n  ;(() => {\n    const scrollTop = Number(sessionStorage.getItem(\"sidebar_scroll\") || 0)\n\n    document.querySelectorAll(\"[data-sidebar='content']\").forEach((content) => {\n      content.scrollTop = scrollTop\n    })\n  })()\n</script>\n\n<script is:inline>\n  ;(() => {\n    if (window.__fulldevSidebarInitialized) return\n    window.__fulldevSidebarInitialized = true\n\n    const SIDEBAR_COOKIE_NAME = \"sidebar_state\"\n    const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\n\n    const toggleSidebar = (provider) => {\n      if (!window.matchMedia(\"(min-width: 768px)\").matches) {\n        const openMobile = provider.dataset.openMobile !== \"true\"\n        provider.dataset.openMobile = openMobile ? \"true\" : \"false\"\n        provider\n          .querySelector(\"[data-sidebar='sheet']\")\n          ?.dispatchEvent(\n            new CustomEvent(\"dialog:set\", { detail: { open: openMobile } })\n          )\n        return\n      }\n\n      const open = provider.dataset.open === \"false\"\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      window.__fulldevSyncSidebarProvider?.(provider, open)\n    }\n\n    document.addEventListener(\"click\", (event) => {\n      const control = event.target?.closest?.(\n        \"[data-sidebar='trigger'], [data-sidebar='rail']\"\n      )\n      if (!control || control.matches(\":disabled, [aria-disabled='true']\")) {\n        return\n      }\n\n      const provider = control.closest(\"[data-slot='sidebar-wrapper']\")\n      if (!provider) return\n\n      toggleSidebar(provider)\n    })\n\n    document.addEventListener(\"keydown\", (event) => {\n      if (event.key.toLowerCase() !== \"b\") return\n      if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey) {\n        return\n      }\n      if (event.defaultPrevented) return\n\n      const target = event.target\n      const isTyping =\n        target instanceof HTMLElement &&\n        (target.isContentEditable ||\n          target.matches(\"input, textarea, select, [role='textbox']\"))\n      if (isTyping) return\n\n      const provider = document.querySelector(\"[data-slot='sidebar-wrapper']\")\n      if (!(provider instanceof HTMLElement)) return\n\n      event.preventDefault()\n      toggleSidebar(provider)\n    })\n\n    document.addEventListener(\n      \"scroll\",\n      (event) => {\n        if (event.target?.dataset?.sidebar === \"content\") {\n          sessionStorage.setItem(\"sidebar_scroll\", event.target.scrollTop)\n        }\n      },\n      true\n    )\n  })()\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst {\n  class: className,\n  style,\n  defaultOpen = true,\n  open,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--sidebar-width: ${SIDEBAR_WIDTH}`,\n  `--sidebar-width-mobile: ${SIDEBAR_WIDTH_MOBILE}`,\n  `--sidebar-width-icon: ${SIDEBAR_WIDTH_ICON}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\"; \")\n---\n\n<div\n  data-slot=\"sidebar-wrapper\"\n  data-default-open={defaultOpen ? \"true\" : \"false\"}\n  data-open={open === undefined ? undefined : open ? \"true\" : \"false\"}\n  style={resolvedStyle}\n  class={cn(\n    \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  <script is:inline>\n    ;(() => {\n      window.__fulldevSyncSidebarProvider ??= (provider, open) => {\n        const state = open ? \"expanded\" : \"collapsed\"\n        const sidebar = provider.querySelector(\n          \"[data-slot='sidebar']:not([data-mobile='true'])\"\n        )\n        const collapsible = sidebar?.dataset.sidebarCollapsible ?? \"offcanvas\"\n\n        provider.dataset.open = open ? \"true\" : \"false\"\n        provider.dataset.state = state\n\n        if (sidebar) {\n          sidebar.dataset.state = collapsible === \"none\" ? \"expanded\" : state\n          sidebar.dataset.collapsible =\n            collapsible === \"none\" ? \"none\" : open ? \"\" : collapsible\n        }\n\n        provider\n          .querySelectorAll(\"[data-sidebar='trigger'], [data-sidebar='rail']\")\n          .forEach((control) => {\n            control.setAttribute(\"aria-expanded\", String(open))\n          })\n\n        provider\n          .querySelectorAll(\"[data-slot='tooltip']\")\n          .forEach((tooltip) => {\n            if (\n              state !== \"collapsed\" &&\n              tooltip.querySelector(\"[data-sidebar='menu-button']\")\n            ) {\n              tooltip.dispatchEvent(\n                new CustomEvent(\"tooltip:set\", { detail: { open: false } })\n              )\n            }\n          })\n      }\n\n      const provider = document.currentScript?.closest(\n        \"[data-slot='sidebar-wrapper']\"\n      )\n      if (!(provider instanceof HTMLElement)) return\n\n      const controlledOpen = provider.dataset.open\n      const cookieValue = document.cookie\n        .split(\"; \")\n        .find((entry) => entry.startsWith(\"sidebar_state=\"))\n        ?.slice(\"sidebar_state=\".length)\n\n      const isOpen =\n        controlledOpen === \"true\" || controlledOpen === \"false\"\n          ? controlledOpen === \"true\"\n          : cookieValue === \"true\" || cookieValue === \"false\"\n            ? cookieValue === \"true\"\n            : provider.dataset.defaultOpen !== \"false\"\n\n      provider.dataset.openMobile = \"false\"\n      window.__fulldevSyncSidebarProvider(provider, isOpen)\n    })()\n  </script>\n</div>\n\n<script is:inline>\n  ;(() => {\n    const scrollTop = Number(sessionStorage.getItem(\"sidebar_scroll\") || 0)\n\n    document.querySelectorAll(\"[data-sidebar='content']\").forEach((content) => {\n      content.scrollTop = scrollTop\n    })\n  })()\n</script>\n\n<script is:inline>\n  ;(() => {\n    if (window.__fulldevSidebarInitialized) return\n    window.__fulldevSidebarInitialized = true\n\n    const SIDEBAR_COOKIE_NAME = \"sidebar_state\"\n    const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\n\n    const toggleSidebar = (provider) => {\n      if (!window.matchMedia(\"(min-width: 768px)\").matches) {\n        const openMobile = provider.dataset.openMobile !== \"true\"\n        provider.dataset.openMobile = openMobile ? \"true\" : \"false\"\n        provider\n          .querySelector(\"[data-sidebar='sheet']\")\n          ?.dispatchEvent(\n            new CustomEvent(\"dialog:set\", { detail: { open: openMobile } })\n          )\n        return\n      }\n\n      const open = provider.dataset.open === \"false\"\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      window.__fulldevSyncSidebarProvider?.(provider, open)\n    }\n\n    document.addEventListener(\"dialog:change\", (event) => {\n      const root = event.target\n      if (!(root instanceof HTMLElement) || root.dataset.sidebar !== \"sheet\")\n        return\n      const provider = root.closest(\"[data-slot='sidebar-wrapper']\")\n      if (provider)\n        provider.dataset.openMobile = String(Boolean(event.detail?.open))\n    })\n\n    document.addEventListener(\"tooltip:change\", (event) => {\n      if (!event.detail?.open) return\n      const root = event.target\n      if (!(root instanceof HTMLElement)) return\n      if (!root.querySelector(\"[data-sidebar='menu-button']\")) return\n      const provider = root.closest(\"[data-slot='sidebar-wrapper']\")\n      const sidebar = root.closest(\"[data-slot='sidebar']\")\n      if (\n        provider?.dataset.state !== \"collapsed\" ||\n        sidebar?.dataset.collapsible !== \"icon\" ||\n        !window.matchMedia(\"(min-width: 768px)\").matches\n      ) {\n        root.dispatchEvent(\n          new CustomEvent(\"tooltip:set\", { detail: { open: false } })\n        )\n      }\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const control = event.target?.closest?.(\n        \"[data-sidebar='trigger'], [data-sidebar='rail']\"\n      )\n      if (!control || control.matches(\":disabled, [aria-disabled='true']\")) {\n        return\n      }\n\n      const provider = control.closest(\"[data-slot='sidebar-wrapper']\")\n      if (!provider) return\n\n      toggleSidebar(provider)\n    })\n\n    document.addEventListener(\"keydown\", (event) => {\n      if (event.key.toLowerCase() !== \"b\") return\n      if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey) {\n        return\n      }\n      if (event.defaultPrevented) return\n\n      const target = event.target\n      const isTyping =\n        target instanceof HTMLElement &&\n        (target.isContentEditable ||\n          target.matches(\"input, textarea, select, [role='textbox']\"))\n      if (isTyping) return\n\n      const provider = document.querySelector(\"[data-slot='sidebar-wrapper']\")\n      if (!(provider instanceof HTMLElement)) return\n\n      event.preventDefault()\n      toggleSidebar(provider)\n    })\n\n    document.addEventListener(\n      \"scroll\",\n      (event) => {\n        if (event.target?.dataset?.sidebar === \"content\") {\n          sessionStorage.setItem(\"sidebar_scroll\", event.target.scrollTop)\n        }\n      },\n      true\n    )\n  })()\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{\n  collapsible === \"none\" ? (\n    <div\n      data-slot=\"sidebar\"\n      data-state=\"expanded\"\n      data-collapsible=\"none\"\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible=\"none\"\n      class={cn(\n        \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <slot />\n    </div>\n  ) : (\n    <>\n      <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n        <SheetContent\n          side={side}\n          showCloseButton={false}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n          class={cn(\n            \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n            className\n          )}\n        >\n          <SheetHeader class=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div class=\"flex h-full w-full flex-col\">\n            <slot />\n          </div>\n        </SheetContent>\n      </Sheet>\n\n      <div\n        data-slot=\"sidebar\"\n        data-state={desktopState}\n        data-collapsible={desktopCollapsible}\n        data-variant={variant}\n        data-side={side}\n        data-sidebar-collapsible={collapsible}\n        class=\"group peer text-sidebar-foreground hidden md:block\"\n      >\n        <div\n          data-slot=\"sidebar-gap\"\n          class={cn(\n            \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n          )}\n        />\n        <div\n          data-slot=\"sidebar-container\"\n          data-side={side}\n          class={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n            className\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            data-slot=\"sidebar-inner\"\n            class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{\n  collapsible === \"none\" ? (\n    <div\n      data-slot=\"sidebar\"\n      data-state=\"expanded\"\n      data-collapsible=\"none\"\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible=\"none\"\n      class={cn(\n        \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <slot />\n    </div>\n  ) : (\n    <>\n      <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n        <SheetContent\n          side={side}\n          showCloseButton={false}\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n          class={cn(\n            \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n            className\n          )}\n        >\n          <SheetHeader class=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div class=\"flex h-full w-full flex-col\">\n            <slot />\n          </div>\n        </SheetContent>\n      </Sheet>\n\n      <div\n        data-slot=\"sidebar\"\n        data-state={desktopState}\n        data-collapsible={desktopCollapsible}\n        data-variant={variant}\n        data-side={side}\n        data-sidebar-collapsible={collapsible}\n        class=\"group peer text-sidebar-foreground hidden md:block\"\n      >\n        <div\n          data-slot=\"sidebar-gap\"\n          class={cn(\n            \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n          )}\n        />\n        <div\n          data-slot=\"sidebar-container\"\n          data-side={side}\n          class={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n            className\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            data-slot=\"sidebar-inner\"\n            class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n",
       "type": "registry:ui"
     },
     {
@@ -92,7 +92,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-menu-button.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { TooltipAlign, TooltipSide } from \"@data-slot/tooltip\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nconst variants = cva(\n  \"peer/menu-button group/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\ntype TooltipValue =\n  | string\n  | (HTMLAttributes<\"div\"> & {\n      content?: string\n      children?: string\n      side?: TooltipSide\n      align?: TooltipAlign\n      sideOffset?: number\n      alignOffset?: number\n      avoidCollisions?: boolean\n      collisionPadding?: number\n    })\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"span\"> & {\n    as?: \"a\" | \"button\" | \"div\" | \"span\"\n    href?: string\n    isActive?: boolean\n    active?: boolean\n    tooltip?: TooltipValue\n  }\n\nconst {\n  as: explicitTag,\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  isActive,\n  active = false,\n  tooltip,\n  type,\n  ...props\n} = Astro.props\n\nconst Tag = explicitTag || (\"href\" in Astro.props ? \"a\" : \"button\")\nconst resolvedActive = isActive ?? active\nconst baseClassName = cn(variants({ variant, size }), className)\nconst resolvedTooltip =\n  typeof tooltip === \"string\" ? { children: tooltip } : tooltip\nconst tooltipText =\n  resolvedTooltip?.content ??\n  (typeof resolvedTooltip?.children === \"string\"\n    ? resolvedTooltip.children\n    : undefined)\nconst {\n  content: _tooltipContent,\n  children: _tooltipChildren,\n  ...tooltipProps\n} = resolvedTooltip ?? {}\n---\n\n{\n  tooltipText ? (\n    <Tooltip>\n      <TooltipTrigger\n        as={Tag}\n        data-slot=\"sidebar-menu-button\"\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={resolvedActive ? \"true\" : undefined}\n        aria-current={resolvedActive ? \"page\" : undefined}\n        type={Tag === \"button\" ? type || \"button\" : undefined}\n        class={baseClassName}\n        {...props}\n      >\n        <slot />\n      </TooltipTrigger>\n      <TooltipContent\n        data-sidebar=\"menu-tooltip\"\n        side=\"right\"\n        align=\"center\"\n        hidden\n        {...tooltipProps}\n      >\n        {tooltipText}\n      </TooltipContent>\n    </Tooltip>\n  ) : (\n    <Tag\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={resolvedActive ? \"true\" : undefined}\n      aria-current={resolvedActive ? \"page\" : undefined}\n      type={Tag === \"button\" ? type || \"button\" : undefined}\n      class={baseClassName}\n      {...props}\n    >\n      <slot />\n    </Tag>\n  )\n}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { TooltipAlign, TooltipSide } from \"@data-slot/tooltip\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nconst variants = cva(\n  \"peer/menu-button group/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\ntype TooltipValue =\n  | string\n  | (HTMLAttributes<\"div\"> & {\n      content?: string\n      children?: string\n      side?: TooltipSide\n      align?: TooltipAlign\n      sideOffset?: number\n      alignOffset?: number\n      avoidCollisions?: boolean\n      collisionPadding?: number\n    })\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"span\"> & {\n    as?: \"a\" | \"button\" | \"div\" | \"span\"\n    href?: string\n    isActive?: boolean\n    active?: boolean\n    tooltip?: TooltipValue\n  }\n\nconst {\n  as: explicitTag,\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  isActive,\n  active = false,\n  tooltip,\n  type,\n  ...props\n} = Astro.props\n\nconst Tag = explicitTag || (\"href\" in Astro.props ? \"a\" : \"button\")\nconst resolvedActive = isActive ?? active\nconst baseClassName = cn(variants({ variant, size }), className)\nconst resolvedTooltip =\n  typeof tooltip === \"string\" ? { children: tooltip } : tooltip\nconst tooltipText =\n  resolvedTooltip?.content ??\n  (typeof resolvedTooltip?.children === \"string\"\n    ? resolvedTooltip.children\n    : undefined)\nconst {\n  content: _tooltipContent,\n  children: _tooltipChildren,\n  ...tooltipProps\n} = resolvedTooltip ?? {}\n---\n\n{\n  tooltipText ? (\n    <Tooltip>\n      <TooltipTrigger\n        as={Tag}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={resolvedActive ? \"true\" : undefined}\n        aria-current={resolvedActive ? \"page\" : undefined}\n        type={Tag === \"button\" ? type || \"button\" : undefined}\n        class={baseClassName}\n        {...props}\n      >\n        <slot />\n      </TooltipTrigger>\n      <TooltipContent\n        data-sidebar=\"menu-tooltip\"\n        side=\"right\"\n        align=\"center\"\n        hidden\n        {...tooltipProps}\n      >\n        {tooltipText}\n      </TooltipContent>\n    </Tooltip>\n  ) : (\n    <Tag\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={resolvedActive ? \"true\" : undefined}\n      aria-current={resolvedActive ? \"page\" : undefined}\n      type={Tag === \"button\" ? type || \"button\" : undefined}\n      class={baseClassName}\n      {...props}\n    >\n      <slot />\n    </Tag>\n  )\n}\n",
       "type": "registry:ui"
     },
     {

package/public/r/slider.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "src/components/ui/slider/slider.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype SliderValue = number | [number, number] | string\ntype ThumbAlignment = \"center\" | \"edge\" | \"edge-client-only\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultValue?: SliderValue\n  min?: number\n  max?: number\n  step?: number\n  largeStep?: number\n  orientation?: \"horizontal\" | \"vertical\"\n  thumbAlignment?: ThumbAlignment\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  defaultValue,\n  min,\n  max,\n  step,\n  largeStep,\n  orientation = \"horizontal\",\n  thumbAlignment = \"edge\",\n  disabled,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? defaultValue.join(\",\")\n  : defaultValue\nconst thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1\n---\n\n<div\n  data-slot=\"slider\"\n  data-default-value={serializedDefaultValue}\n  data-min={min}\n  data-max={max}\n  data-step={step}\n  data-large-step={largeStep}\n  data-orientation={orientation}\n  data-thumb-alignment={thumbAlignment}\n  data-disabled={disabled}\n  class={cn(\n    \"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n    className\n  )}\n  {...props}\n>\n  <div\n    data-slot=\"slider-control\"\n    data-orientation={orientation}\n    data-disabled={disabled}\n    class=\"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\"\n  >\n    <div\n      data-slot=\"slider-track\"\n      class=\"bg-muted relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n    >\n      <div\n        data-slot=\"slider-range\"\n        class=\"bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n      >\n      </div>\n    </div>\n    {\n      Array.from({ length: thumbCount }).map(() => (\n        <div\n          data-slot=\"slider-thumb\"\n          class=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n        />\n      ))\n    }\n  </div>\n</div>\n\n<script>\n  import { create } from \"@data-slot/slider\"\n\n  create()\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype SliderValue = number | [number, number] | string\ntype ThumbAlignment = \"center\" | \"edge\" | \"edge-client-only\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultValue?: SliderValue\n  min?: number\n  max?: number\n  step?: number\n  largeStep?: number\n  orientation?: \"horizontal\" | \"vertical\"\n  thumbAlignment?: ThumbAlignment\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  defaultValue,\n  min,\n  max,\n  step,\n  largeStep,\n  orientation = \"horizontal\",\n  thumbAlignment = \"edge\",\n  disabled,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? defaultValue.join(\",\")\n  : defaultValue\nconst thumbCount = String(serializedDefaultValue ?? \"\").includes(\",\") ? 2 : 1\n---\n\n<div\n  data-slot=\"slider\"\n  data-default-value={serializedDefaultValue}\n  data-min={min}\n  data-max={max}\n  data-step={step}\n  data-large-step={largeStep}\n  data-orientation={orientation}\n  data-thumb-alignment={thumbAlignment}\n  data-disabled={disabled ? \"true\" : undefined}\n  class={cn(\n    \"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n    className\n  )}\n  {...props}\n>\n  <div\n    data-slot=\"slider-control\"\n    data-orientation={orientation}\n    data-disabled={disabled ? \"true\" : undefined}\n    class=\"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\"\n  >\n    <div\n      data-slot=\"slider-track\"\n      class=\"bg-muted relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n    >\n      <div\n        data-slot=\"slider-range\"\n        class=\"bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n      >\n      </div>\n    </div>\n    {\n      Array.from({ length: thumbCount }).map(() => (\n        <div\n          data-slot=\"slider-thumb\"\n          class=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n        />\n      ))\n    }\n  </div>\n</div>\n\n<script>\n  import { create } from \"@data-slot/slider\"\n\n  create()\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/switch.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "src/components/ui/switch/switch.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\"> & {\n  defaultChecked?: boolean\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  name?: string\n  size?: \"default\" | \"sm\"\n  value?: string\n  uncheckedValue?: string\n}\n\nconst {\n  class: className,\n  defaultChecked,\n  disabled,\n  readOnly,\n  required,\n  name,\n  size = \"default\",\n  value,\n  uncheckedValue,\n  ...props\n} = Astro.props\n\nconst initialChecked = defaultChecked === true\nconst switchStyle =\n  \"peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent 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 data-readonly:cursor-default\"\nconst switchSizeStyle = {\n  sm: \"h-[14px] w-[24px]\",\n  default: \"h-[18.4px] w-[32px]\",\n}\n---\n\n<span\n  role=\"switch\"\n  aria-checked={initialChecked ? \"true\" : \"false\"}\n  aria-disabled={disabled ? \"true\" : undefined}\n  aria-readonly={readOnly ? \"true\" : undefined}\n  aria-required={required ? \"true\" : undefined}\n  data-slot=\"switch\"\n  data-size={size}\n  data-checked={initialChecked ? \"\" : undefined}\n  data-unchecked={initialChecked ? undefined : \"\"}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-read-only={readOnly}\n  data-readonly={readOnly}\n  data-required={required}\n  data-name={name}\n  data-value={value}\n  data-unchecked-value={uncheckedValue}\n  class={cn(switchStyle, switchSizeStyle[size], className)}\n  {...props}\n>\n  <span\n    aria-hidden=\"true\"\n    data-slot=\"switch-thumb\"\n    class=\"bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n  ></span>\n</span>\n\n<script>\n  import { create } from \"@data-slot/switch\"\n\n  create()\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\"> & {\n  defaultChecked?: boolean\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  name?: string\n  size?: \"default\" | \"sm\"\n  value?: string\n  uncheckedValue?: string\n}\n\nconst {\n  class: className,\n  defaultChecked,\n  disabled,\n  readOnly,\n  required,\n  name,\n  size = \"default\",\n  value,\n  uncheckedValue,\n  ...props\n} = Astro.props\n\nconst initialChecked = defaultChecked === true\nconst switchStyle =\n  \"peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent 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 data-readonly:cursor-default\"\nconst switchSizeStyle = {\n  sm: \"h-[14px] w-[24px]\",\n  default: \"h-[18.4px] w-[32px]\",\n}\n---\n\n<span\n  role=\"switch\"\n  aria-checked={initialChecked ? \"true\" : \"false\"}\n  aria-disabled={disabled ? \"true\" : undefined}\n  aria-readonly={readOnly ? \"true\" : undefined}\n  aria-required={required ? \"true\" : undefined}\n  data-slot=\"switch\"\n  data-size={size}\n  data-checked={initialChecked ? \"\" : undefined}\n  data-unchecked={initialChecked ? undefined : \"\"}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled ? \"true\" : undefined}\n  data-read-only={readOnly}\n  data-readonly={readOnly ? \"\" : undefined}\n  data-required={required}\n  data-name={name}\n  data-value={value}\n  data-unchecked-value={uncheckedValue}\n  class={cn(switchStyle, switchSizeStyle[size], className)}\n  {...props}\n>\n  <span\n    aria-hidden=\"true\"\n    data-slot=\"switch-thumb\"\n    data-checked={initialChecked ? \"\" : undefined}\n    data-unchecked={initialChecked ? undefined : \"\"}\n    class=\"bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n  ></span>\n</span>\n\n<script>\n  import { create } from \"@data-slot/switch\"\n\n  create()\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/tabs.json

@@ -12,7 +12,7 @@
     },
     {
       "path": "src/components/ui/tabs/tabs-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: string\n}\n\nconst { class: className, value, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"tabs-content\"\n  data-value={value}\n  class={cn(\"flex-1 text-sm outline-none\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: string\n}\n\nconst { class: className, hidden = true, value, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"tabs-content\"\n  hidden={hidden}\n  data-value={value}\n  class={cn(\"flex-1 text-sm outline-none\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {

package/public/r/toggle.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "src/components/ui/toggle/toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { toggleVariants, type ToggleVariantProps } from \"./toggle-variants\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  ToggleVariantProps & {\n    defaultPressed?: boolean\n    disabled?: boolean\n  }\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  defaultPressed,\n  disabled,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toggle\"\n  data-default-pressed={defaultPressed}\n  data-disabled={disabled}\n  type={type}\n  class={cn(toggleVariants({ variant, size }), className)}\n  {...props}\n>\n  <slot />\n</button>\n\n<script>\n  import { create } from \"@data-slot/toggle\"\n\n  create()\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { toggleVariants, type ToggleVariantProps } from \"./toggle-variants\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  ToggleVariantProps & {\n    defaultPressed?: boolean\n    disabled?: boolean\n  }\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  defaultPressed,\n  disabled,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toggle\"\n  data-default-pressed={defaultPressed}\n  data-disabled={disabled}\n  type={type}\n  disabled={disabled}\n  aria-pressed={defaultPressed === true ? \"true\" : \"false\"}\n  class={cn(toggleVariants({ variant, size }), className)}\n  {...props}\n>\n  <slot />\n</button>\n\n<script>\n  import { create } from \"@data-slot/toggle\"\n\n  create()\n</script>\n",
       "type": "registry:ui"
     },
     {

package/registry.json

@@ -637,7 +637,7 @@
     {
       "name": "hover-card",
       "type": "registry:ui",
-      "dependencies": ["@data-slot/hover-card"],
+      "dependencies": ["@data-slot/hover-card", "@data-slot/core"],
       "files": [
         {
           "path": "src/components/ui/hover-card/hover-card.astro",

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

@@ -5,11 +5,12 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div">
 
-const { class: className, ...props } = Astro.props
+const { class: className, hidden = true, ...props } = Astro.props
 ---
 
 <div
   data-slot="accordion-content"
+  hidden={hidden}
   class="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
   {...props}
 >

package/src/components/ui/alert-dialog/alert-dialog-content.astro

@@ -22,7 +22,7 @@ const { class: className, size = "default", style, ...props } = Astro.props
       "group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
       className
     )}
-    style={`z-index: calc(var(--alert-dialog-content-stack-index, 0) + 111);${style ? ` ${style}` : ""}`}
+    style={`z-index: calc(var(--alert-dialog-content-stack-index, 0) * 2 + 101);${style ? ` ${style}` : ""}`}
     {...props}
   >
     <slot />

package/src/components/ui/alert-dialog/alert-dialog-overlay.astro

@@ -15,7 +15,7 @@ const { class: className, style, ...props } = Astro.props
     "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-(--alert-dialog-overlay-stack-index) bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
     className
   )}
-  style={`z-index: calc(var(--alert-dialog-overlay-stack-index, 0) + 110);${style ? ` ${style}` : ""}`}
+  style={`z-index: calc(var(--alert-dialog-overlay-stack-index, 0) * 2 + 100);${style ? ` ${style}` : ""}`}
   {...props}
 >
 </div>

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

@@ -28,7 +28,7 @@ const {
       "bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md",
       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}
   >
     {

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

@@ -15,7 +15,7 @@ const { class: className, style, ...props } = Astro.props
     "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
     className
   )}
-  style={`z-index: calc(var(--dialog-overlay-stack-index, 0) + 100);${style ? ` ${style}` : ""}`}
+  style={`z-index: calc(var(--dialog-overlay-stack-index, 0) * 2 + 100);${style ? ` ${style}` : ""}`}
   {...props}
 >
   <slot />

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

@@ -43,7 +43,7 @@ const {
 <div
   data-slot="hover-card"
   data-default-open={defaultOpen}
-  data-open={open}
+  data-controlled-open={open}
   data-delay={delay}
   data-skip-delay-duration={skipDelayDuration}
   data-close-delay={closeDelay}
@@ -63,7 +63,10 @@ const {
 </div>
 
 <script>
-  import { create } from "@data-slot/hover-card"
+  import { getDataBool } from "@data-slot/core"
+  import { createHoverCard } from "@data-slot/hover-card"
 
-  create()
+  document.querySelectorAll('[data-slot="hover-card"]').forEach((root) => {
+    createHoverCard(root, { open: getDataBool(root, "controlledOpen") })
+  })
 </script>

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,6 +25,7 @@ const {
 <div
   {...props}
   data-slot="navigation-menu-content"
+  hidden={hidden}
   data-align={align}
   data-align-offset={alignOffset}
   data-side={side}

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-0",
+    "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/sheet/sheet-content.astro

@@ -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
@@ -36,7 +36,7 @@ const {
       "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 />

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>

package/src/components/ui/sidebar/sidebar-menu-button.astro

@@ -91,7 +91,6 @@ const {
     <Tooltip>
       <TooltipTrigger
         as={Tag}
-        data-slot="sidebar-menu-button"
         data-sidebar="menu-button"
         data-size={size}
         data-active={resolvedActive ? "true" : undefined}

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

@@ -67,9 +67,16 @@ const resolvedStyle = [
           })
 
         provider
-          .querySelectorAll("[data-sidebar='menu-tooltip']")
+          .querySelectorAll("[data-slot='tooltip']")
           .forEach((tooltip) => {
-            tooltip.hidden = state !== "collapsed"
+            if (
+              state !== "collapsed" &&
+              tooltip.querySelector("[data-sidebar='menu-button']")
+            ) {
+              tooltip.dispatchEvent(
+                new CustomEvent("tooltip:set", { detail: { open: false } })
+              )
+            }
           })
       }
 
@@ -132,6 +139,33 @@ const resolvedStyle = [
       window.__fulldevSyncSidebarProvider?.(provider, open)
     }
 
+    document.addEventListener("dialog:change", (event) => {
+      const root = event.target
+      if (!(root instanceof HTMLElement) || root.dataset.sidebar !== "sheet")
+        return
+      const provider = root.closest("[data-slot='sidebar-wrapper']")
+      if (provider)
+        provider.dataset.openMobile = String(Boolean(event.detail?.open))
+    })
+
+    document.addEventListener("tooltip:change", (event) => {
+      if (!event.detail?.open) return
+      const root = event.target
+      if (!(root instanceof HTMLElement)) return
+      if (!root.querySelector("[data-sidebar='menu-button']")) return
+      const provider = root.closest("[data-slot='sidebar-wrapper']")
+      const sidebar = root.closest("[data-slot='sidebar']")
+      if (
+        provider?.dataset.state !== "collapsed" ||
+        sidebar?.dataset.collapsible !== "icon" ||
+        !window.matchMedia("(min-width: 768px)").matches
+      ) {
+        root.dispatchEvent(
+          new CustomEvent("tooltip:set", { detail: { open: false } })
+        )
+      }
+    })
+
     document.addEventListener("click", (event) => {
       const control = event.target?.closest?.(
         "[data-sidebar='trigger'], [data-sidebar='rail']"

package/src/components/ui/sidebar/sidebar.astro

@@ -54,7 +54,6 @@ const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
           side={side}
           showCloseButton={false}
           data-sidebar="sidebar"
-          data-slot="sidebar"
           data-mobile="true"
           style="--sidebar-width: var(--sidebar-width-mobile);"
           class={cn(

package/src/components/ui/slider/slider.astro

@@ -33,7 +33,7 @@ const {
 const serializedDefaultValue = Array.isArray(defaultValue)
   ? defaultValue.join(",")
   : defaultValue
-const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
+const thumbCount = String(serializedDefaultValue ?? "").includes(",") ? 2 : 1
 ---
 
 <div
@@ -45,7 +45,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
   data-large-step={largeStep}
   data-orientation={orientation}
   data-thumb-alignment={thumbAlignment}
-  data-disabled={disabled}
+  data-disabled={disabled ? "true" : undefined}
   class={cn(
     "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
     className
@@ -55,7 +55,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
   <div
     data-slot="slider-control"
     data-orientation={orientation}
-    data-disabled={disabled}
+    data-disabled={disabled ? "true" : undefined}
     class="relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
   >
     <div

package/src/components/ui/switch/switch.astro

@@ -47,9 +47,9 @@ const switchSizeStyle = {
   data-checked={initialChecked ? "" : undefined}
   data-unchecked={initialChecked ? undefined : ""}
   data-default-checked={defaultChecked}
-  data-disabled={disabled}
+  data-disabled={disabled ? "true" : undefined}
   data-read-only={readOnly}
-  data-readonly={readOnly}
+  data-readonly={readOnly ? "" : undefined}
   data-required={required}
   data-name={name}
   data-value={value}
@@ -60,6 +60,8 @@ const switchSizeStyle = {
   <span
     aria-hidden="true"
     data-slot="switch-thumb"
+    data-checked={initialChecked ? "" : undefined}
+    data-unchecked={initialChecked ? undefined : ""}
     class="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
   ></span>
 </span>

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

@@ -7,11 +7,12 @@ type Props = HTMLAttributes<"div"> & {
   value?: string
 }
 
-const { class: className, value, ...props } = Astro.props
+const { class: className, hidden = true, value, ...props } = Astro.props
 ---
 
 <div
   data-slot="tabs-content"
+  hidden={hidden}
   data-value={value}
   class={cn("flex-1 text-sm outline-none", className)}
   {...props}

package/src/components/ui/toggle/toggle.astro

@@ -27,6 +27,8 @@ const {
   data-default-pressed={defaultPressed}
   data-disabled={disabled}
   type={type}
+  disabled={disabled}
+  aria-pressed={defaultPressed === true ? "true" : "false"}
   class={cn(toggleVariants({ variant, size }), className)}
   {...props}
 >