@nuxt/ui 4.2.1 → 4.4.0

package/dist/shared/{ui.B77q-Dvh.mjs → ui.Ddb3hKxo.mjs}

@@ -3,7 +3,7 @@ import 'node:url';
 import { pascalCase, kebabCase, camelCase } from 'scule';
 import { genExport } from 'knitwork';
 import colors from 'tailwindcss/colors';
-import { addTypeTemplate, addTemplate, updateTemplates, hasNuxtModule, logger } from '@nuxt/kit';
+import { addTypeTemplate, addTemplate, updateTemplates, hasNuxtModule, getLayerDirectories, logger } from '@nuxt/kit';
 import { readFile } from 'node:fs/promises';
 import { join } from 'pathe';
 import { globSync } from 'tinyglobby';
@@ -26,6 +26,7 @@ const icons = {
   copy: "i-lucide-copy",
   copyCheck: "i-lucide-copy-check",
   dark: "i-lucide-moon",
+  drag: "i-lucide-grip-vertical",
   ellipsis: "i-lucide-ellipsis",
   error: "i-lucide-circle-x",
   external: "i-lucide-arrow-up-right",
@@ -133,10 +134,10 @@ function applyDefaultVariants(result, defaultVariants) {
   if (!result || !defaultVariants) {
     return result;
   }
-  if (result.defaultVariants?.color && defaultVariants.color) {
+  if (defaultVariants.color && result.defaultVariants?.color && result.defaultVariants.color === "primary") {
     result.defaultVariants.color = defaultVariants.color;
   }
-  if (result.defaultVariants?.size && defaultVariants.size) {
+  if (defaultVariants.size && result.defaultVariants?.size && result.defaultVariants.size === "md") {
     result.defaultVariants.size = defaultVariants.size;
   }
   return result;
@@ -692,9 +693,9 @@ const blogPost = (options) => ({
     },
     to: {
       true: {
-        root: [options.theme.transitions && "transition"],
+        root: ["has-focus-visible:ring-2 has-focus-visible:ring-primary", options.theme.transitions && "transition"],
         image: "transform transition-transform duration-200 group-hover/blog-post:scale-110",
-        avatar: "transform transition-transform duration-200 hover:scale-115"
+        avatar: "transform transition-transform duration-200 hover:scale-115 focus-visible:outline-primary"
       }
     },
     image: {
@@ -986,8 +987,10 @@ const calendar = (options) => ({
     gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
     gridBody: "grid",
     headCell: "rounded-md",
+    headCellWeek: "rounded-md text-muted",
     cell: "relative text-center",
-    cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted", options.theme.transitions && "transition"]
+    cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted", options.theme.transitions && "transition"],
+    cellWeek: "relative text-center text-muted"
   },
   variants: {
     color: {
@@ -1010,32 +1013,46 @@ const calendar = (options) => ({
       xs: {
         heading: "text-xs",
         cell: "text-xs",
+        cellWeek: "text-xs",
         headCell: "text-[10px]",
+        headCellWeek: "text-[10px]",
         cellTrigger: "size-7",
         body: "space-y-2 pt-2"
       },
       sm: {
         heading: "text-xs",
         headCell: "text-xs",
+        headCellWeek: "text-xs",
+        cellWeek: "text-xs",
         cell: "text-xs",
         cellTrigger: "size-7"
       },
       md: {
         heading: "text-sm",
         headCell: "text-xs",
+        headCellWeek: "text-xs",
+        cellWeek: "text-xs",
         cell: "text-sm",
         cellTrigger: "size-8"
       },
       lg: {
         heading: "text-md",
         headCell: "text-md",
+        headCellWeek: "text-md",
         cellTrigger: "size-9 text-md"
       },
       xl: {
         heading: "text-lg",
         headCell: "text-lg",
+        headCellWeek: "text-lg",
         cellTrigger: "size-10 text-lg"
       }
+    },
+    weekNumbers: {
+      true: {
+        gridRow: "grid-cols-8",
+        gridWeekDaysRow: "grid-cols-8 [&>*:first-child]:col-start-2"
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -1133,7 +1150,7 @@ const carousel = (options) => ({
     prev: "absolute rounded-full",
     next: "absolute rounded-full",
     dots: "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
-    dot: ["cursor-pointer size-3 bg-accented rounded-full", options.theme.transitions && "transition"]
+    dot: ["cursor-pointer size-3 bg-accented rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", options.theme.transitions && "transition"]
   },
   variants: {
     orientation: {
@@ -1158,7 +1175,7 @@ const carousel = (options) => ({
   }
 });
 
-const changelogVersion = {
+const changelogVersion = (options) => ({
   slots: {
     root: "relative",
     container: "flex flex-col mx-auto max-w-2xl",
@@ -1189,7 +1206,8 @@ const changelogVersion = {
     },
     to: {
       true: {
-        image: "transform transition-transform duration-200 group-hover/changelog-version-image:scale-105"
+        title: ["has-focus-visible:ring-2 has-focus-visible:ring-primary rounded-xs", options.theme.transitions && "transition"],
+        image: "transform transition-transform duration-200 group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105"
       }
     },
     hidden: {
@@ -1198,7 +1216,7 @@ const changelogVersion = {
       }
     }
   }
-};
+});
 
 const changelogVersions = {
   slots: {
@@ -1713,26 +1731,26 @@ const colorPicker = {
 const commandPalette = (options) => ({
   slots: {
     root: "flex flex-col min-h-0 min-w-0 divide-y divide-default",
-    input: "[&>input]:h-12",
+    input: "",
     close: "",
     back: "p-0",
     content: "relative overflow-hidden flex flex-col",
     footer: "p-1",
     viewport: "relative scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
     group: "p-1 isolate",
-    empty: "py-6 text-center text-sm text-muted",
-    label: "p-1.5 text-xs font-semibold text-highlighted",
-    item: "group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
-    itemLeadingIcon: "shrink-0 size-5",
+    empty: "text-center text-muted",
+    label: "font-semibold text-highlighted",
+    item: "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
-    itemLeadingAvatarSize: "2xs",
-    itemLeadingChip: "shrink-0 size-5",
-    itemLeadingChipSize: "md",
-    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    itemTrailingIcon: "shrink-0 size-5",
-    itemTrailingHighlightedIcon: "shrink-0 size-5 text-dimmed hidden group-data-highlighted:inline-flex",
-    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5",
-    itemTrailingKbdsSize: "md",
+    itemLeadingAvatarSize: "",
+    itemLeadingChip: "shrink-0",
+    itemLeadingChipSize: "",
+    itemTrailing: "ms-auto inline-flex items-center",
+    itemTrailingIcon: "shrink-0",
+    itemTrailingHighlightedIcon: "shrink-0 text-dimmed hidden group-data-highlighted:inline-flex",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+    itemTrailingKbdsSize: "",
     itemWrapper: "flex-1 flex flex-col text-start min-w-0",
     itemLabel: "truncate space-x-1 text-dimmed",
     itemDescription: "truncate text-muted",
@@ -1749,6 +1767,83 @@ const commandPalette = (options) => ({
         viewport: "divide-y divide-default"
       }
     },
+    size: {
+      xs: {
+        input: "[&>input]:h-10",
+        empty: "py-3 text-xs",
+        label: "p-1 text-[10px]/3 gap-1",
+        item: "p-1 text-xs gap-1",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemLeadingChip: "size-4",
+        itemLeadingChipSize: "sm",
+        itemTrailing: "gap-1",
+        itemTrailingIcon: "size-4",
+        itemTrailingHighlightedIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      sm: {
+        input: "[&>input]:h-11",
+        empty: "py-4 text-xs",
+        label: "p-1.5 text-[10px]/3 gap-1.5",
+        item: "p-1.5 text-xs gap-1.5",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemLeadingChip: "size-4",
+        itemLeadingChipSize: "sm",
+        itemTrailing: "gap-1.5",
+        itemTrailingIcon: "size-4",
+        itemTrailingHighlightedIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      md: {
+        input: "[&>input]:h-12",
+        empty: "py-6 text-sm",
+        label: "p-1.5 text-xs gap-1.5",
+        item: "p-1.5 text-sm gap-1.5",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemLeadingChip: "size-5",
+        itemLeadingChipSize: "md",
+        itemTrailing: "gap-1.5",
+        itemTrailingIcon: "size-5",
+        itemTrailingHighlightedIcon: "size-5",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "md"
+      },
+      lg: {
+        input: "[&>input]:h-13",
+        empty: "py-7 text-sm",
+        label: "p-2 text-xs gap-2",
+        item: "p-2 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemLeadingChip: "size-5",
+        itemLeadingChipSize: "md",
+        itemTrailing: "gap-2",
+        itemTrailingIcon: "size-5",
+        itemTrailingHighlightedIcon: "size-5",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "md"
+      },
+      xl: {
+        input: "[&>input]:h-14",
+        empty: "py-8 text-base",
+        label: "p-2 text-sm gap-2",
+        item: "p-2 text-base gap-2",
+        itemLeadingIcon: "size-6",
+        itemLeadingAvatarSize: "xs",
+        itemLeadingChip: "size-6",
+        itemLeadingChipSize: "lg",
+        itemTrailing: "gap-2",
+        itemTrailingIcon: "size-6",
+        itemTrailingHighlightedIcon: "size-6",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "lg"
+      }
+    },
     active: {
       true: {
         item: "text-highlighted before:bg-elevated",
@@ -1764,6 +1859,9 @@ const commandPalette = (options) => ({
         itemLeadingIcon: "animate-spin"
       }
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
 });
 
@@ -1924,20 +2022,40 @@ const dashboardPanel = {
 };
 
 const dashboardResizeHandle = {
-  base: "hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5"
+  base: "hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1"
 };
 
 const dashboardSearch = {
   slots: {
     modal: "",
-    input: "[&>input]:text-base/5"
+    input: ""
   },
   variants: {
     fullscreen: {
       false: {
-        modal: "sm:max-w-3xl sm:h-[28rem]"
+        modal: "sm:max-w-3xl h-full sm:h-[28rem]"
+      }
+    },
+    size: {
+      xs: {
+        input: "[&>input]:text-sm"
+      },
+      sm: {
+        input: "[&>input]:text-sm"
+      },
+      md: {
+        input: "[&>input]:text-base/5"
+      },
+      lg: {
+        input: "[&>input]:text-base/5"
+      },
+      xl: {
+        input: "[&>input]:text-lg"
       }
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
 };
 
@@ -2260,6 +2378,168 @@ const dropdownMenu = (options) => ({
   }
 });
 
+const editor = (options) => ({
+  slots: {
+    root: "",
+    content: "relative size-full flex-1",
+    base: [
+      "w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20",
+      // Paragraph
+      "[&_p]:leading-7",
+      // Links
+      "[&_a]:text-primary [&_a]:border-b [&_a]:border-transparent [&_a]:hover:border-primary [&_a]:font-medium",
+      options.theme?.transitions && "[&_a]:transition-colors",
+      // Code inside links
+      "[&_a>code]:border-dashed [&_a:hover>code]:border-primary [&_a:hover>code]:text-primary",
+      options.theme?.transitions && "[&_a>code]:transition-colors",
+      // Mentions
+      "[&_.mention]:text-primary [&_.mention]:font-medium",
+      // Headings - shared styles
+      "[&_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&_:is(h1,h2,h3,h4,h5,h6)]:font-bold",
+      // Headings - unique styles
+      "[&_h1]:text-3xl",
+      "[&_h2]:text-2xl",
+      "[&_h3]:text-xl",
+      "[&_h4]:text-lg",
+      "[&_h5]:text-base",
+      "[&_h6]:text-base",
+      // Code inside headings
+      "[&_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold",
+      "[&_h2>code]:text-xl/6",
+      "[&_h3>code]:text-lg/5",
+      // Blockquote & HR
+      "[&_blockquote]:border-s-4 [&_blockquote]:border-accented [&_blockquote]:ps-4 [&_blockquote]:italic",
+      "[&_[data-type=horizontalRule]]:my-8 [&_[data-type=horizontalRule]]:py-2",
+      "[&_hr]:border-t [&_hr]:border-default",
+      // Code blocks
+      "[&_pre]:text-sm/6 [&_pre]:border [&_pre]:border-muted [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:px-4 [&_pre]:py-3 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:overflow-x-auto",
+      "[&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:font-inherit [&_pre_code]:rounded-none [&_pre_code]:inline [&_pre_code]:border-0 [&_pre_code]:bg-transparent",
+      // Inline code
+      "[&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono [&_code]:font-medium [&_code]:rounded-md [&_code]:inline-block [&_code]:border [&_code]:border-muted [&_code]:text-highlighted [&_code]:bg-muted",
+      // Lists
+      "[&_:is(ul,ol)]:ps-6",
+      "[&_ul]:list-disc [&_ul]:marker:text-(--ui-border-accented)",
+      "[&_ol]:list-decimal [&_ol]:marker:text-muted",
+      "[&_li]:my-1.5 [&_li]:ps-1.5",
+      // Images
+      "[&_img]:rounded-md [&_img]:block [&_img]:max-w-full [&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-primary",
+      // Selected nodes
+      "[&_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20"
+    ]
+  },
+  variants: {
+    placeholderMode: {
+      firstLine: {
+        base: "[&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:text-dimmed [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:float-left [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:h-0 [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:pointer-events-none"
+      },
+      everyLine: {
+        base: "[&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-left [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none"
+      }
+    }
+  },
+  defaultVariants: {
+    placeholderMode: "everyLine"
+  }
+});
+
+const editorDragHandle = {
+  slots: {
+    root: "hidden sm:flex items-center justify-center transition-all duration-200 ease-out",
+    handle: "cursor-grab px-1"
+  }
+};
+
+const editorSuggestionMenu = (options) => ({
+  slots: {
+    content: "min-w-48 max-w-60 max-h-96 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col",
+    viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
+    group: "p-1 isolate",
+    label: "w-full flex items-center font-semibold text-highlighted",
+    separator: "-mx-1 my-1 h-px bg-border",
+    item: "group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    itemLeadingIcon: "shrink-0 flex items-center justify-center",
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "",
+    itemWrapper: "flex-1 flex flex-col text-start min-w-0",
+    itemLabel: "truncate",
+    itemDescription: "truncate text-muted",
+    itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
+  },
+  variants: {
+    size: {
+      xs: {
+        label: "p-1 text-[10px]/3 gap-1",
+        item: "p-1 text-xs gap-1",
+        itemLeadingIcon: "size-4 text-sm",
+        itemLeadingAvatarSize: "3xs"
+      },
+      sm: {
+        label: "p-1.5 text-[10px]/3 gap-1.5",
+        item: "p-1.5 text-xs gap-1.5",
+        itemLeadingIcon: "size-4 text-sm",
+        itemLeadingAvatarSize: "3xs"
+      },
+      md: {
+        label: "p-1.5 text-xs gap-1.5",
+        item: "p-1.5 text-sm gap-1.5",
+        itemLeadingIcon: "size-5 text-base",
+        itemLeadingAvatarSize: "2xs"
+      },
+      lg: {
+        label: "p-2 text-xs gap-2",
+        item: "p-2 text-sm gap-2",
+        itemLeadingIcon: "size-5 text-base",
+        itemLeadingAvatarSize: "2xs"
+      },
+      xl: {
+        label: "p-2 text-sm gap-2",
+        item: "p-2 text-base gap-2",
+        itemLeadingIcon: "size-6 text-xl",
+        itemLeadingAvatarSize: "xs"
+      }
+    },
+    active: {
+      true: {
+        item: "text-highlighted before:bg-elevated/75",
+        itemLeadingIcon: "text-default"
+      },
+      false: {
+        item: ["text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-dimmed group-data-highlighted:not-group-data-disabled:text-default", options.theme.transitions && "transition-colors"]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+const editorEmojiMenu = (options) => editorSuggestionMenu(options);
+
+const editorMentionMenu = (options) => editorSuggestionMenu(options);
+
+const editorToolbar = {
+  slots: {
+    root: "focus:outline-none",
+    base: "flex items-stretch gap-1.5",
+    group: "flex items-center gap-0.5",
+    separator: "w-px self-stretch bg-border"
+  },
+  variants: {
+    layout: {
+      bubble: {
+        base: "bg-default border border-default rounded-lg p-1"
+      },
+      floating: {
+        base: "bg-default border border-default rounded-lg p-1"
+      },
+      fixed: {
+        base: ""
+      }
+    }
+  }
+};
+
 const empty = {
   slots: {
     root: "relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0",
@@ -2576,9 +2856,9 @@ const formField = {
   slots: {
     root: "",
     wrapper: "",
-    labelWrapper: "flex content-center items-center justify-between",
+    labelWrapper: "flex content-center items-center justify-between gap-1",
     label: "block font-medium text-default",
-    container: "mt-1 relative",
+    container: "relative",
     description: "text-muted",
     error: "mt-2 text-error",
     hint: "text-muted",
@@ -2596,10 +2876,19 @@ const formField = {
       true: {
         label: `after:content-['*'] after:ms-0.5 after:text-error`
       }
+    },
+    orientation: {
+      vertical: {
+        container: "mt-1"
+      },
+      horizontal: {
+        root: "flex justify-between place-items-baseline gap-2"
+      }
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "md",
+    orientation: "vertical"
   }
 };
 
@@ -2797,6 +3086,7 @@ const inputDate = (options) => {
       separatorIcon: "shrink-0 size-4 text-muted"
     },
     variants: {
+      ...fieldGroupVariant,
       size: {
         xs: {
           base: (prev) => [prev, "gap-0.25"],
@@ -2854,6 +3144,7 @@ const inputMenu = (options) => {
     slots: {
       base: () => ["rounded-md", options.theme.transitions && "transition-colors"],
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
+      trailingClear: "p-0",
       arrow: "fill-default",
       content: "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col",
       viewport: "relative scroll-py-1 overflow-y-auto flex-1",
@@ -3157,6 +3448,7 @@ const inputTime = (options) => {
       segment: ["rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75", options.theme.transitions && "transition-colors"]
     },
     variants: {
+      ...fieldGroupVariant,
       size: {
         xs: {
           base: (prev) => [prev, "gap-0.25"],
@@ -3772,7 +4064,7 @@ const pageCta = {
     },
     reverse: {
       true: {
-        wrapper: "lg:order-last"
+        wrapper: "order-last"
       }
     },
     variant: {
@@ -3833,7 +4125,7 @@ const pageCard = (options) => ({
     },
     reverse: {
       true: {
-        wrapper: "lg:order-last"
+        wrapper: "order-last"
       }
     },
     variant: {
@@ -3864,7 +4156,7 @@ const pageCard = (options) => ({
     },
     to: {
       true: {
-        root: [options.theme.transitions && "transition"]
+        root: ["has-focus-visible:ring-2 has-focus-visible:ring-primary", options.theme.transitions && "transition"]
       }
     },
     title: {
@@ -3952,11 +4244,6 @@ const pageCard = (options) => ({
     class: {
       root: "[--spotlight-color:var(--ui-bg-inverted)]"
     }
-  }, {
-    to: true,
-    class: {
-      root: "has-focus-visible:ring-2 has-focus-visible:ring-primary"
-    }
   }],
   defaultVariants: {
     variant: "outline",
@@ -3969,9 +4256,9 @@ const pageColumns = {
   base: "relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform"
 };
 
-const pageFeature = {
+const pageFeature = (options) => ({
   slots: {
-    root: "relative",
+    root: "relative rounded-sm",
     wrapper: "",
     leading: "inline-flex items-center justify-center",
     leadingIcon: "size-5 shrink-0 text-primary",
@@ -3988,13 +4275,18 @@ const pageFeature = {
         leading: "mb-2.5"
       }
     },
+    to: {
+      true: {
+        root: ["has-focus-visible:ring-2 has-focus-visible:ring-primary", options.theme.transitions && "transition"]
+      }
+    },
     title: {
       true: {
         description: "mt-1"
       }
     }
   }
-};
+});
 
 const pageGrid = {
   base: "relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
@@ -4147,7 +4439,7 @@ const pageSection = {
     },
     reverse: {
       true: {
-        wrapper: "lg:order-last"
+        wrapper: "order-last"
       }
     },
     headline: {
@@ -4825,6 +5117,28 @@ const radioGroup = (options) => ({
   }
 });
 
+const scrollArea = {
+  slots: {
+    root: "relative",
+    viewport: "relative flex",
+    item: ""
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: "overflow-y-auto overflow-x-hidden",
+        viewport: "flex-col",
+        item: ""
+      },
+      horizontal: {
+        root: "overflow-x-auto overflow-y-hidden",
+        viewport: "flex-row",
+        item: ""
+      }
+    }
+  }
+};
+
 const select = (options) => {
   return defuFn({
     slots: {
@@ -4922,7 +5236,8 @@ const selectMenu = (options) => {
       input: "border-b border-default",
       focusScope: "flex flex-col min-h-0",
       viewport: "relative scroll-py-1 overflow-y-auto flex-1",
-      content: (content) => [content, "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"]
+      content: (content) => [content, "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"],
+      trailingClear: "p-0"
     },
     variants: {
       virtualize: {
@@ -5057,16 +5372,21 @@ const slideover = {
   variants: {
     side: {
       top: {
-        content: "inset-x-0 top-0 max-h-full"
+        content: ""
       },
       right: {
-        content: "right-0 inset-y-0 w-full max-w-md"
+        content: "max-w-md"
       },
       bottom: {
-        content: "inset-x-0 bottom-0 max-h-full"
+        content: ""
       },
       left: {
-        content: "left-0 inset-y-0 w-full max-w-md"
+        content: "max-w-md"
+      }
+    },
+    inset: {
+      true: {
+        content: "rounded-lg"
       }
     },
     transition: {
@@ -5076,6 +5396,54 @@ const slideover = {
     }
   },
   compoundVariants: [{
+    side: "top",
+    inset: true,
+    class: {
+      content: "max-h-[calc(100%-2rem)] inset-x-4 top-4"
+    }
+  }, {
+    side: "top",
+    inset: false,
+    class: {
+      content: "max-h-full inset-x-0 top-0"
+    }
+  }, {
+    side: "right",
+    inset: true,
+    class: {
+      content: "w-[calc(100%-2rem)] inset-y-4 right-4"
+    }
+  }, {
+    side: "right",
+    inset: false,
+    class: {
+      content: "w-full inset-y-0 right-0"
+    }
+  }, {
+    side: "bottom",
+    inset: true,
+    class: {
+      content: "max-h-[calc(100%-2rem)] inset-x-4 bottom-4"
+    }
+  }, {
+    side: "bottom",
+    inset: false,
+    class: {
+      content: "max-h-full inset-x-0 bottom-0"
+    }
+  }, {
+    side: "left",
+    inset: true,
+    class: {
+      content: "w-[calc(100%-2rem)] inset-y-4 left-4"
+    }
+  }, {
+    side: "left",
+    inset: false,
+    class: {
+      content: "w-full inset-y-0 left-0"
+    }
+  }, {
     transition: true,
     side: "top",
     class: {
@@ -5439,12 +5807,12 @@ const table$1 = (options) => ({
     base: "min-w-full",
     caption: "sr-only",
     thead: "relative",
-    tbody: "[&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
+    tbody: "isolate [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
     tfoot: "relative",
     tr: "data-[selected=true]:bg-elevated/50",
     th: "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
     td: "p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    separator: "absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)",
+    separator: "absolute z-1 left-0 w-full h-px bg-(--ui-border-accented)",
     empty: "py-6 text-center text-sm text-muted",
     loading: "py-6 text-center"
   },
@@ -5457,25 +5825,25 @@ const table$1 = (options) => ({
     },
     pinned: {
       true: {
-        th: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
-        td: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+        th: "sticky bg-default/75 z-1",
+        td: "sticky bg-default/75 z-1"
       }
     },
     sticky: {
       true: {
-        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur",
-        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+        thead: "sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1",
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur z-1"
       },
       header: {
-        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+        thead: "sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1"
       },
       footer: {
-        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur z-1"
       }
     },
     loading: {
       true: {
-        thead: "after:absolute after:z-[1] after:h-px"
+        thead: "after:absolute after:z-1 after:h-px"
       }
     },
     loadingAnimation: {
@@ -6116,9 +6484,9 @@ const user = (options) => ({
     },
     to: {
       true: {
-        name: ["text-default peer-hover:text-highlighted", options.theme.transitions && "transition-colors"],
-        description: ["peer-hover:text-toned", options.theme.transitions && "transition-colors"],
-        avatar: "transform transition-transform duration-200 group-hover/user:scale-115"
+        name: ["text-default peer-hover:text-highlighted peer-focus-visible:text-highlighted", options.theme.transitions && "transition-colors"],
+        description: ["peer-hover:text-toned peer-focus-visible:text-toned", options.theme.transitions && "transition-colors"],
+        avatar: "transform transition-transform duration-200 group-hover/user:scale-115 group-has-focus-visible/user:scale-115"
       },
       false: {
         name: "text-highlighted",
@@ -6224,6 +6592,12 @@ const theme = {
   dashboardToolbar: dashboardToolbar,
   drawer: drawer,
   dropdownMenu: dropdownMenu,
+  editor: editor,
+  editorDragHandle: editorDragHandle,
+  editorEmojiMenu: editorEmojiMenu,
+  editorMentionMenu: editorMentionMenu,
+  editorSuggestionMenu: editorSuggestionMenu,
+  editorToolbar: editorToolbar,
   empty: empty,
   error: error,
   fieldGroup: fieldGroup$1,
@@ -6268,6 +6642,7 @@ const theme = {
   pricingTable: pricingTable,
   progress: progress,
   radioGroup: radioGroup,
+  scrollArea: scrollArea,
   select: select,
   selectMenu: selectMenu,
   separator: separator,
@@ -6288,7 +6663,7 @@ const theme = {
 };
 
 const a = (options) => ({
-  base: ["text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary", options.theme.transitions && "transition-colors [&>code]:transition-colors"]
+  base: ["text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary focus-visible:has-[>code]:outline-0 [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary", options.theme.transitions && "transition-colors [&>code]:transition-colors"]
 });
 
 const accordion = {
@@ -6319,7 +6694,7 @@ const callout = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `border border-${color}/25 bg-${color}/10 text-${color}-600 dark:text-${color}-300 [&_a]:text-${color} [&_a]:hover:border-${color} [&_code]:text-${color}-600 dark:[&_code]:text-${color}-300 [&_code]:border-${color}/25 [&_a]:hover:[&>code]:border-${color} [&_a]:hover:[&>code]:text-${color} [&>ul]:marker:text-${color}/50`,
+        base: `border border-${color}/25 bg-${color}/10 text-${color}-600 dark:text-${color}-300 [&_a]:text-${color} [&_a]:hover:border-${color} [&_a]:focus-visible:outline-${color} [&_code]:text-${color}-600 dark:[&_code]:text-${color}-300 [&_code]:border-${color}/25 [&_a]:hover:[&>code]:border-${color} [&_a]:hover:[&>code]:text-${color} [&_a]:focus-visible:[&>code]:border-${color} [&_a]:focus-visible:[&>code]:text-${color} [&>ul]:marker:text-${color}/50`,
         icon: `text-${color}`,
         externalIcon: `text-${color}-600 dark:text-${color}-300`
       }])),
@@ -6337,14 +6712,14 @@ const callout = (options) => ({
     color,
     to: true,
     class: {
-      base: `hover:border-${color}`,
+      base: `hover:border-${color} has-focus-visible:border-${color}`,
       externalIcon: `group-hover:text-${color}`
     }
   })), {
     color: "neutral",
     to: true,
     class: {
-      base: "hover:border-inverted",
+      base: "hover:border-inverted has-focus-visible:border-inverted",
       externalIcon: "group-hover:text-highlighted"
     }
   }],
@@ -6383,14 +6758,14 @@ const card = (options) => ({
     color,
     to: true,
     class: {
-      base: `hover:bg-${color}/10 hover:border-${color}`,
+      base: `hover:bg-${color}/10 hover:border-${color} has-focus-visible:border-${color}`,
       externalIcon: `group-hover:text-${color}`
     }
   })), {
     color: "neutral",
     to: true,
     class: {
-      base: "hover:bg-elevated/50 hover:border-inverted",
+      base: "hover:bg-elevated/50 hover:border-inverted has-focus-visible:border-inverted",
       externalIcon: "group-hover:text-highlighted"
     }
   }],
@@ -6510,6 +6885,7 @@ const codeIcon = {
   "npx": "i-vscode-icons-file-type-npm",
   "yarn": "i-vscode-icons-file-type-yarn",
   "bun": "i-vscode-icons-file-type-bun",
+  "deno": "i-vscode-icons-file-type-deno",
   "yml": "i-vscode-icons-file-type-yaml",
   "terminal": "i-lucide-terminal"
 };
@@ -6721,11 +7097,31 @@ const tbody = {
 };
 
 const td = {
-  base: "py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5"
+  base: "py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5",
+  variants: {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    }
+  },
+  defaultVariants: {
+    align: "left"
+  }
 };
 
 const th = {
-  base: "py-3 px-4 font-semibold text-sm text-left border-e border-b first:border-s border-t border-muted"
+  base: "py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted",
+  variants: {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    }
+  },
+  defaultVariants: {
+    align: "left"
+  }
 };
 
 const thead = {
@@ -6942,14 +7338,34 @@ const contentNavigation = (options) => ({
 const contentSearch = {
   slots: {
     modal: "",
-    input: "[&>input]:text-base/5"
+    input: ""
   },
   variants: {
     fullscreen: {
       false: {
-        modal: "sm:max-w-3xl sm:h-[28rem]"
+        modal: "sm:max-w-3xl h-full sm:h-[28rem]"
+      }
+    },
+    size: {
+      xs: {
+        input: "[&>input]:text-sm"
+      },
+      sm: {
+        input: "[&>input]:text-sm"
+      },
+      md: {
+        input: "[&>input]:text-base/5"
+      },
+      lg: {
+        input: "[&>input]:text-base/5"
+      },
+      xl: {
+        input: "[&>input]:text-lg"
       }
     }
+  },
+  defaultVariants: {
+    size: "md"
   }
 };
 
@@ -7127,14 +7543,27 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
   }
   writeThemeTemplate(theme);
   async function generateSources() {
-    let sources = "";
-    if (!!nuxt && !!resolve && options.experimental?.componentDetection) {
-      const dirs = [.../* @__PURE__ */ new Set([
-        nuxt.options.rootDir,
-        ...nuxt.options._layers?.map((layer) => layer.config.rootDir).filter(Boolean) || []
-      ])];
+    if (!nuxt) {
+      return '@source "./ui";';
+    }
+    const sources = [];
+    const layers = getLayerDirectories(nuxt).map((layer) => layer.app);
+    for (const layer of layers) {
+      sources.push(`@source "${layer}**/*";`);
+    }
+    const inlineConfigs = [
+      nuxt.options.app?.rootAttrs?.class,
+      nuxt.options.app?.head?.htmlAttrs?.class,
+      nuxt.options.app?.head?.bodyAttrs?.class
+    ];
+    for (const value of inlineConfigs) {
+      if (value && typeof value === "string") {
+        sources.push(`@source inline(${JSON.stringify(value)});`);
+      }
+    }
+    if (resolve && options.experimental?.componentDetection) {
       const detectedComponents = await detectUsedComponents(
-        dirs,
+        layers,
         options.prefix,
         resolve("./runtime/components"),
         Array.isArray(options.experimental.componentDetection) ? options.experimental.componentDetection : void 0
@@ -7151,28 +7580,29 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
           logger.success(`Nuxt UI detected ${detectedComponents.size} components in use (including dependencies)`);
         }
         previousDetectedComponents = detectedComponents;
-        const sourcesList = [];
         if (hasProse) {
-          sourcesList.push('@source "./ui/prose";');
+          sources.push('@source "./ui/prose";');
         }
         for (const component of detectedComponents) {
           const kebabComponent = kebabCase(component);
           const camelComponent = camelCase(component);
           if (hasContent && themeContent[camelComponent]) {
-            sourcesList.push(`@source "./ui/content/${kebabComponent}.ts";`);
+            sources.push(`@source "./ui/content/${kebabComponent}.ts";`);
           } else if (theme[camelComponent]) {
-            sourcesList.push(`@source "./ui/${kebabComponent}.ts";`);
+            sources.push(`@source "./ui/${kebabComponent}.ts";`);
           }
         }
-        sources = sourcesList.join("\n");
       } else {
         if (!previousDetectedComponents || previousDetectedComponents.size > 0) {
           logger.info("Nuxt UI detected no components in use, including all components");
         }
         previousDetectedComponents = /* @__PURE__ */ new Set();
+        sources.push('@source "./ui";');
       }
+    } else {
+      sources.push('@source "./ui";');
     }
-    return sources || '@source "./ui";';
+    return sources.join("\n");
   }
   templates.push({
     filename: "ui.css",