@nuxt/ui 4.10.0 → 4.11.1

package/dist/shared/{ui.XkBrgXFP.mjs → ui.DCJ9twx8.mjs}

@@ -1,12 +1,15 @@
 import { pick } from '../../dist/runtime/utils/index.js';
 import 'node:url';
-import { pascalCase, kebabCase, camelCase } from 'scule';
+import { kebabCase, pascalCase, camelCase } from 'scule';
 import { genExport } from 'knitwork';
 import colors from 'tailwindcss/colors';
-import { addTypeTemplate, addTemplate, updateTemplates, hasNuxtModule, getLayerDirectories, logger } from '@nuxt/kit';
+import { getLayerDirectories, addTypeTemplate, addTemplate, updateTemplates, hasNuxtModule, logger } from '@nuxt/kit';
+import { existsSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
-import { join } from 'pathe';
+import { consola } from 'consola';
+import { dirname, normalize, join, resolve } from 'pathe';
 import { globSync } from 'tinyglobby';
+import { resolvePathSync } from 'mlly';
 import { defuFn, defu } from 'defu';
 
 const defaultIcons = {
@@ -138,6 +141,10 @@ function applyUnstyled(result, unstyled) {
     return result;
   }
   const blank = (value) => value && typeof value === "object" && !Array.isArray(value) ? Object.fromEntries(Object.keys(value).map((slot) => [slot, ""])) : "";
+  result = { ...result };
+  if (result.base) {
+    result.base = "";
+  }
   if (result.slots) {
     result.slots = Object.fromEntries(Object.keys(result.slots).map((slot) => [slot, ""]));
   }
@@ -170,12 +177,30 @@ function applyDefaultVariants(result, defaultVariants) {
   return result;
 }
 
-async function buildComponentDependencyGraph(componentDir, componentPattern) {
+function createComponentPattern(prefix) {
+  const escapedPrefix = prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const kebabPrefix = kebabCase(prefix).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`<(?:Lazy)?${escapedPrefix}([A-Z][a-zA-Z]+)|<(?:lazy-)?${kebabPrefix}-([a-z][a-z0-9-]*)|\\b(?:Lazy)?${escapedPrefix}([A-Z][a-zA-Z]+)\\b`, "g");
+}
+function getMatchedComponent(match) {
+  if (match[2]) {
+    return pascalCase(match[2]);
+  }
+  return match[1] || match[3];
+}
+async function buildComponentDependencyGraph(componentDir) {
   const dependencyGraph = /* @__PURE__ */ new Map();
+  const componentPattern = createComponentPattern("U");
   const componentFiles = globSync(["**/*.vue"], {
     cwd: componentDir,
-    absolute: true
+    absolute: true,
+    // Prose components share file basenames with nine regular components
+    // (`prose/Tabs.vue` vs `Tabs.vue`), and the graph is keyed by basename:
+    // letting them in overwrites the regular component's dependency set. They
+    // don't need nodes anyway, they are never used with the `U` prefix.
+    ignore: ["prose/**"]
   });
+  const componentNames = new Set(componentFiles.map((file) => pascalCase(file.split("/").pop().replace(".vue", ""))));
   for (const componentFile of componentFiles) {
     try {
       const content = await readFile(componentFile, "utf-8");
@@ -183,8 +208,8 @@ async function buildComponentDependencyGraph(componentDir, componentPattern) {
       const dependencies = /* @__PURE__ */ new Set();
       const matches = content.matchAll(componentPattern);
       for (const match of matches) {
-        const depName = match[1] || match[2];
-        if (depName && depName !== componentName) {
+        const depName = getMatchedComponent(match);
+        if (depName && depName !== componentName && componentNames.has(depName)) {
           dependencies.add(depName);
         }
       }
@@ -207,6 +232,32 @@ function resolveComponentDependencies(component, dependencyGraph, resolved = /*
   }
   return resolved;
 }
+function resolveExtraScanDirs(root, scanPackages, componentDirs) {
+  const dirs = /* @__PURE__ */ new Set();
+  for (const pkg of scanPackages || []) {
+    try {
+      dirs.add(dirname(normalize(resolvePathSync(`${pkg}/package.json`, { url: join(root, "_index.mjs") }))));
+    } catch {
+      try {
+        const entry = normalize(resolvePathSync(pkg, { url: join(root, "_index.mjs") }));
+        const marker = `node_modules/${pkg}`;
+        const index = entry.lastIndexOf(`${marker}/`);
+        dirs.add(index === -1 ? dirname(entry) : entry.slice(0, index + marker.length));
+      } catch {
+        consola.warn(`Nuxt UI could not resolve \`${pkg}\` from \`scanPackages\`: it will not be scanned for component detection`);
+      }
+    }
+  }
+  const rootDir = normalize(root);
+  const userDirs = Array.isArray(componentDirs) ? componentDirs : componentDirs ? [componentDirs] : [];
+  for (const dir of userDirs) {
+    const resolved = resolve(root, dir.split(/[*{]/)[0]);
+    if (resolved !== rootDir && !resolved.startsWith(`${rootDir}/`) && existsSync(resolved)) {
+      dirs.add(resolved);
+    }
+  }
+  return [...dirs];
+}
 async function detectUsedComponents(dirs, prefix, componentDir, includeComponents) {
   const detectedComponents = /* @__PURE__ */ new Set();
   if (includeComponents && includeComponents.length > 0) {
@@ -214,11 +265,17 @@ async function detectUsedComponents(dirs, prefix, componentDir, includeComponent
       detectedComponents.add(component);
     }
   }
-  const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, "g");
+  const componentPattern = createComponentPattern(prefix);
   for (const dir of dirs) {
-    const appFiles = globSync(["**/*.{vue,ts,js,tsx,jsx}"], {
+    const isPackageDir = normalize(dir).includes("node_modules/");
+    const appFiles = globSync(["**/*.{vue,ts,mts,js,mjs,cjs,tsx,jsx}"], {
       cwd: dir,
-      ignore: ["node_modules/**", ".nuxt/**", "dist/**"]
+      // `**/` prefixes so nested dirs are skipped too: the Vue integration
+      // scans the whole Vite root, not just Nuxt layer `app/` directories.
+      // Declaration files can't render components, and the generated
+      // `components.d.ts` declares every component ever rendered, which would
+      // keep anything used once detected forever.
+      ignore: isPackageDir ? ["**/node_modules/**", "**/*.d.ts"] : ["**/node_modules/**", "**/.nuxt/**", "**/dist/**", "**/*.d.ts"]
     });
     for (const file of appFiles) {
       try {
@@ -226,7 +283,7 @@ async function detectUsedComponents(dirs, prefix, componentDir, includeComponent
         const content = await readFile(filePath, "utf-8");
         const matches = content.matchAll(componentPattern);
         for (const match of matches) {
-          const componentName = match[1] || match[2];
+          const componentName = getMatchedComponent(match);
           if (componentName) {
             detectedComponents.add(componentName);
           }
@@ -238,13 +295,18 @@ async function detectUsedComponents(dirs, prefix, componentDir, includeComponent
   if (detectedComponents.size === 0) {
     return void 0;
   }
-  const dependencyGraph = await buildComponentDependencyGraph(componentDir, componentPattern);
+  const dependencyGraph = await buildComponentDependencyGraph(componentDir);
+  const unknownComponents = includeComponents?.filter((component) => !dependencyGraph.has(component));
+  if (unknownComponents?.length) {
+    consola.warn(`Nuxt UI \`componentDetection\` includes unknown components: ${unknownComponents.join(", ")}`);
+  }
+  const validComponents = Array.from(detectedComponents).filter((component) => dependencyGraph.has(component));
+  if (validComponents.length === 0) {
+    return void 0;
+  }
   const allComponents = /* @__PURE__ */ new Set();
-  for (const component of detectedComponents) {
-    const resolved = resolveComponentDependencies(component, dependencyGraph);
-    for (const resolvedComponent of resolved) {
-      allComponents.add(resolvedComponent);
-    }
+  for (const component of validComponents) {
+    resolveComponentDependencies(component, dependencyGraph, allComponents);
   }
   return allComponents;
 }
@@ -255,10 +317,10 @@ const accordion$1 = {
     item: "border-b border-default last:border-b-0",
     header: "flex",
     trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 outline-primary/25 focus-visible:outline-3 min-w-0 rounded-md",
-    content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] data-[state=closed]:overflow-hidden focus:outline-none",
+    content: "data-[state=open]:animate-[accordion-down_200ms_var(--ease-out)] data-[state=closed]:animate-[accordion-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none",
     body: "text-sm pb-3.5",
     leadingIcon: "shrink-0 size-5",
-    trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
+    trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none",
     label: "text-start break-words"
   },
   variants: {
@@ -741,8 +803,8 @@ const blogPost = (options) => ({
     to: {
       true: {
         root: ["outline-primary/25 has-[>a:focus-visible]:outline-3", options.theme.transitions && "transition"],
-        image: "transform transition-transform duration-200 group-hover/blog-post:scale-110",
-        avatar: "inline-flex transform transition-transform duration-200 hover:scale-115 rounded-full outline-primary/25 focus-visible:outline-3"
+        image: "transform transition-transform ease-out motion-reduce:transition-none group-hover/blog-post:scale-110",
+        avatar: "inline-flex transform transition-transform ease-out motion-reduce:transition-none hover:scale-115 rounded-full outline-primary/25 focus-visible:outline-3"
       }
     },
     image: {
@@ -778,7 +840,7 @@ const blogPost = (options) => ({
     to: true,
     class: {
       root: "hover:bg-elevated/50",
-      header: ["group-hover/blog-post:shadow-none", options.theme.transitions && "transition-all"]
+      header: ["group-hover/blog-post:shadow-none", options.theme.transitions && "transition-[box-shadow,border-radius] ease-out"]
     }
   }, {
     variant: "ghost",
@@ -1049,18 +1111,18 @@ const button = (options) => ({
 });
 
 const daySizes = {
-  xs: "size-7",
+  xs: "size-6",
   sm: "size-7",
   md: "size-8",
-  lg: "size-9 text-md",
-  xl: "size-10 text-lg"
+  lg: "size-9",
+  xl: "size-10"
 };
 const pickerSizes = {
-  xs: "h-7 px-2",
+  xs: "h-6 px-2",
   sm: "h-7 px-2",
   md: "h-8 px-3",
-  lg: "h-9 px-4 text-md",
-  xl: "h-10 px-5 text-lg"
+  lg: "h-9 px-4",
+  xl: "h-10 px-5"
 };
 const calendar = (options) => ({
   slots: {
@@ -1120,14 +1182,18 @@ const calendar = (options) => ({
         cell: "text-sm"
       },
       lg: {
-        headingLabel: "text-md",
-        headCell: "text-md",
-        headCellWeek: "text-md"
+        headingLabel: "text-base",
+        headCell: "text-base",
+        headCellWeek: "text-base",
+        cellWeek: "text-base",
+        cell: "text-base"
       },
       xl: {
         headingLabel: "text-lg",
         headCell: "text-lg",
-        headCellWeek: "text-lg"
+        headCellWeek: "text-lg",
+        cellWeek: "text-lg",
+        cell: "text-lg"
       }
     },
     view: {
@@ -1332,7 +1398,7 @@ const changelogVersion = (options) => ({
     to: {
       true: {
         title: ["outline-primary/25 has-focus-visible:outline-3 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"
+        image: "transform transition-transform ease-out motion-reduce:transition-none group-hover/changelog-version-image:scale-105 group-has-focus-visible/changelog-version-image:scale-105"
       }
     },
     hidden: {
@@ -1364,7 +1430,7 @@ const chatMessage = (options) => ({
     leadingAvatarSize: "",
     files: "flex items-center gap-1.5",
     content: "relative text-pretty wrap-break-word *:first:mt-0 *:last:mb-0",
-    actions: ["[@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center", options.theme.transitions && "transition-opacity"]
+    actions: ["[@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center", options.theme.transitions && "transition-opacity ease-out"]
   },
   variants: {
     variant: {
@@ -1502,7 +1568,7 @@ const chatMessages = {
   slots: {
     root: "w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)",
     indicator: "h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated motion-safe:[&>*:nth-child(1)]:animate-[bounce_1s_infinite] motion-safe:[&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] motion-safe:[&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]",
-    viewport: "absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+    viewport: "absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]",
     autoScroll: "rounded-full absolute right-1/2 translate-x-1/2 bottom-0"
   },
   variants: {
@@ -1525,7 +1591,7 @@ const chatPalette = {
 const focusHighlight = (utilities) => ["textarea", "[contenteditable]"].flatMap((element) => utilities.split(" ").map((utility) => `has-[${element}:focus-visible]:${utility}`)).join(" ");
 const chatPrompt = (options) => ({
   slots: {
-    root: "relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur",
+    root: "relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm",
     header: "flex items-center gap-1.5",
     body: "items-start gap-1.5",
     footer: "flex items-center justify-between gap-1.5",
@@ -1586,10 +1652,10 @@ const chatReasoning = (options) => ({
     trigger: ["group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default rounded-sm outline-primary/25 focus-visible:outline-3 min-w-0", options.theme.transitions && "transition-colors"],
     leading: "relative size-4 shrink-0",
     leadingIcon: "size-4 shrink-0",
-    chevronIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
+    chevronIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none",
     label: "truncate",
-    trailingIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
-    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden rounded-sm outline-primary/25 has-focus-visible:outline-3",
+    trailingIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none",
+    content: "data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden rounded-sm outline-primary/25 has-focus-visible:outline-3",
     body: "max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap focus:outline-none"
   },
   variants: {
@@ -1601,8 +1667,8 @@ const chatReasoning = (options) => ({
     },
     alone: {
       false: {
-        leadingIcon: ["absolute inset-0 group-data-[state=open]:opacity-0", options.theme.transitions && "transition-opacity duration-200"],
-        chevronIcon: ["absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100", options.theme.transitions && "transition-[rotate,opacity] duration-200"]
+        leadingIcon: ["absolute inset-0 group-data-[state=open]:opacity-0", options.theme.transitions && "transition-opacity duration-200 ease-out"],
+        chevronIcon: ["absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100", options.theme.transitions && "transition-[rotate,opacity] duration-200 ease-out motion-reduce:transition-none"]
       }
     }
   }
@@ -1618,11 +1684,11 @@ const chatTool = (options) => ({
     trigger: ["group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default min-w-0", options.theme.transitions && "transition-colors"],
     leading: "relative size-4 shrink-0",
     leadingIcon: "size-4 shrink-0",
-    chevronIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
+    chevronIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none",
     label: "truncate",
     suffix: "text-dimmed ms-1",
-    trailingIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
-    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden",
+    trailingIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none",
+    content: "data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden",
     body: "text-sm text-dimmed whitespace-pre-wrap",
     actions: "flex items-center justify-end gap-1.5"
   },
@@ -1652,20 +1718,23 @@ const chatTool = (options) => ({
     },
     alone: {
       false: {
-        leadingIcon: ["absolute inset-0 group-hover:opacity-0 group-data-[state=open]:opacity-0", options.theme.transitions && "transition-opacity duration-200"],
-        chevronIcon: ["absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100", options.theme.transitions && "transition-[rotate,opacity] duration-200"]
+        leadingIcon: ["absolute inset-0 group-hover:opacity-0 group-data-[state=open]:opacity-0", options.theme.transitions && "transition-opacity duration-200 ease-out"],
+        chevronIcon: ["absolute inset-0 opacity-0 group-hover:opacity-100 group-data-[state=open]:opacity-100", options.theme.transitions && "transition-[rotate,opacity] duration-200 ease-out motion-reduce:transition-none"]
       }
     }
   }
 });
 
+const hover = "hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:";
+const focusControl = (token) => `outline-${token}/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-${token}`;
+const focusCard = (token) => `outline-${token}/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-${token} has-focus-visible:z-[1]`;
 const checkbox = (options) => ({
   slots: {
     root: "relative flex items-start",
     container: "flex items-center",
-    base: "rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3",
+    base: "rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none",
     indicator: "flex items-center justify-center size-full text-inverted",
-    icon: "shrink-0 size-full",
+    icon: "shrink-0",
     wrapper: "w-full",
     label: "block font-medium text-default",
     description: "text-muted"
@@ -1673,11 +1742,9 @@ const checkbox = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `outline-${color}/25 focus-visible:ring-${color}`,
         indicator: `bg-${color}`
       }])),
       neutral: {
-        base: "outline-inverted/25 focus-visible:ring-inverted",
         indicator: "bg-inverted"
       }
     },
@@ -1686,7 +1753,7 @@ const checkbox = (options) => ({
         root: ""
       },
       card: {
-        root: "border border-muted rounded-lg"
+        root: [`border border-default rounded-lg ${hover}bg-elevated/50`, options.theme.transitions && "transition-colors"]
       }
     },
     indicator: {
@@ -1700,32 +1767,37 @@ const checkbox = (options) => ({
       },
       hidden: {
         base: "sr-only",
-        wrapper: "text-center"
+        wrapper: "flex flex-col items-center gap-1 text-center"
       }
     },
     size: {
       xs: {
         base: "size-3",
+        icon: "size-2.5",
         container: "h-4",
         wrapper: "text-xs"
       },
       sm: {
         base: "size-3.5",
+        icon: "size-3",
         container: "h-4",
         wrapper: "text-xs"
       },
       md: {
         base: "size-4",
+        icon: "size-3.5",
         container: "h-5",
         wrapper: "text-sm"
       },
       lg: {
         base: "size-4.5",
+        icon: "size-4",
         container: "h-5",
         wrapper: "text-sm"
       },
       xl: {
         base: "size-5",
+        icon: "size-4.5",
         container: "h-6",
         wrapper: "text-base"
       }
@@ -1744,30 +1816,72 @@ const checkbox = (options) => ({
       }
     },
     highlight: {
-      true: ""
+      true: "",
+      false: ""
     },
     checked: {
       true: ""
     }
   },
   compoundVariants: [
+    {
+      indicator: "hidden",
+      class: {
+        container: "h-auto"
+      }
+    },
+    {
+      variant: "card",
+      highlight: false,
+      class: {
+        root: `${hover}border-accented`
+      }
+    },
+    { size: "xs", indicator: "hidden", class: { icon: "size-3" } },
+    { size: "sm", indicator: "hidden", class: { icon: "size-3.5" } },
+    { size: "md", indicator: "hidden", class: { icon: "size-4" } },
+    { size: "lg", indicator: "hidden", class: { icon: "size-4.5" } },
+    { size: "xl", indicator: "hidden", class: { icon: "size-5" } },
     { size: "xs", variant: "card", class: { root: "p-2.5" } },
     { size: "sm", variant: "card", class: { root: "p-3" } },
     { size: "md", variant: "card", class: { root: "p-3.5" } },
     { size: "lg", variant: "card", class: { root: "p-4" } },
     { size: "xl", variant: "card", class: { root: "p-4.5" } },
+    ...[...(options.theme.colors || []).map((color) => [color, color]), ["neutral", "inverted"]].map(([color, token]) => ({
+      color,
+      variant: "list",
+      indicator: ["start", "end"],
+      class: {
+        base: focusControl(token)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color) => [color, color]), ["neutral", "inverted"]].map(([color, token]) => ({
+      color,
+      variant: "card",
+      class: {
+        root: focusCard(token)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color) => [color, color]), ["neutral", "inverted"]].map(([color, token]) => ({
+      color,
+      variant: "list",
+      indicator: "hidden",
+      class: {
+        root: focusCard(token)
+      }
+    })),
     ...(options.theme.colors || []).map((color) => ({
       color,
       variant: "card",
       class: {
-        root: `has-data-[state=checked]:border-${color}`
+        root: `has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:bg-${color}/10`
       }
     })),
     {
       color: "neutral",
       variant: "card",
       class: {
-        root: "has-data-[state=checked]:border-inverted"
+        root: "has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated"
       }
     },
     {
@@ -1777,6 +1891,22 @@ const checkbox = (options) => ({
         root: "cursor-not-allowed"
       }
     },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      indicator: "hidden",
+      highlight: true,
+      class: {
+        root: `not-has-disabled:border-${color} not-has-disabled:has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      indicator: "hidden",
+      highlight: true,
+      class: {
+        root: "not-has-disabled:border-inverted not-has-disabled:has-data-[state=checked]:border-inverted"
+      }
+    },
     ...(options.theme.colors || []).map((color) => ({
       color,
       highlight: true,
@@ -1793,6 +1923,7 @@ const checkbox = (options) => ({
     }
   ],
   defaultVariants: {
+    highlight: false,
     size: "md",
     color: "primary",
     variant: "list",
@@ -1821,10 +1952,14 @@ const checkboxGroup = (options) => ({
       neutral: {}
     },
     variant: {
-      list: {},
-      card: {},
+      list: {
+        fieldset: "flex-wrap"
+      },
+      card: {
+        fieldset: "flex-wrap"
+      },
       table: {
-        item: "border border-muted"
+        item: [`border border-default ${hover}bg-elevated/50`, options.theme.transitions && "transition-colors"]
       }
     },
     size: {
@@ -1854,11 +1989,29 @@ const checkboxGroup = (options) => ({
         legend: "after:content-['*'] after:ms-0.5 after:text-error"
       }
     },
+    highlight: {
+      true: {},
+      false: {}
+    },
     disabled: {
       true: {}
     }
   },
   compoundVariants: [
+    ...[...(options.theme.colors || []).map((color) => [color, color]), ["neutral", "inverted"]].map(([color, token]) => ({
+      color,
+      variant: "table",
+      class: {
+        item: focusCard(token)
+      }
+    })),
+    {
+      variant: "table",
+      highlight: false,
+      class: {
+        item: `${hover}border-accented`
+      }
+    },
     { size: "xs", variant: "table", class: { item: "p-2.5" } },
     { size: "sm", variant: "table", class: { item: "p-3" } },
     { size: "md", variant: "table", class: { item: "p-3.5" } },
@@ -1903,6 +2056,7 @@ const checkboxGroup = (options) => ({
     }
   ],
   defaultVariants: {
+    highlight: false,
     size: "md",
     variant: "list",
     color: "primary"
@@ -1970,7 +2124,7 @@ const chip = (options) => ({
 const collapsible$1 = {
   slots: {
     root: "",
-    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden"
+    content: "data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden"
   }
 };
 
@@ -2008,7 +2162,6 @@ const colorPicker = {
       }
     }
   },
-  compoundVariants: [],
   defaultVariants: {
     size: "md"
   }
@@ -2157,7 +2310,7 @@ const container = {
 
 const contextMenu = (options) => ({
   slots: {
-    content: "min-w-32 max-h-(--reka-context-menu-content-available-height) 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-context-menu-content-transform-origin) flex flex-col",
+    content: "min-w-32 max-h-(--reka-context-menu-content-available-height) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-context-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",
@@ -2421,7 +2574,7 @@ const drawer = (options) => ({
   slots: {
     overlay: "fixed inset-0 bg-elevated/75",
     content: "fixed bg-default ring ring-default flex focus:outline-none",
-    handle: ["shrink-0 !bg-accented", options.theme.transitions && "transition-opacity"],
+    handle: ["shrink-0 !bg-accented", options.theme.transitions && "transition-opacity ease-out"],
     container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     header: "flex items-center gap-1.5 min-h-8",
     wrapper: "min-w-0 flex-1",
@@ -2550,7 +2703,7 @@ const drawer = (options) => ({
 
 const dropdownMenu = (options) => ({
   slots: {
-    content: "min-w-32 max-h-(--reka-dropdown-menu-content-available-height) 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",
+    content: "min-w-32 max-h-(--reka-dropdown-menu-content-available-height) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col",
     input: "border-b border-default",
     empty: "text-center text-muted",
     viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
@@ -2730,14 +2883,14 @@ const editor = (options) => ({
 
 const editorDragHandle = {
   slots: {
-    root: "hidden sm:flex items-center justify-center transition-all duration-200 ease-out",
+    root: "hidden sm:flex items-center justify-center transition-[top,left] duration-200 ease-out motion-reduce:transition-none",
     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",
+    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_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] 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",
@@ -2914,7 +3067,7 @@ const error = {
 const fileUpload = (options) => ({
   slots: {
     root: "relative flex flex-col",
-    base: ["w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-3", options.theme.transitions && "transition-[background]"],
+    base: ["w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-3", options.theme.transitions && "transition-[background] ease-out"],
     wrapper: "flex flex-col items-center justify-center text-center",
     icon: "shrink-0",
     avatar: "shrink-0",
@@ -3186,7 +3339,7 @@ const formField = {
 
 const header = {
   slots: {
-    root: "bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50",
+    root: "bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50",
     container: "flex items-center justify-between gap-3 h-full",
     left: "lg:flex-1 flex items-center gap-1.5",
     center: "hidden lg:flex",
@@ -3401,7 +3554,7 @@ const inputDate = (options) => {
     slots: {
       root: () => void 0,
       base: () => ["group relative inline-flex items-center rounded-md select-none", options.theme.transitions && "transition-colors"],
-      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"],
+      segment: ["rounded-sm 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"],
       separatorIcon: "shrink-0 size-4 text-muted"
     },
     variants: {
@@ -3474,7 +3627,7 @@ const inputMenu = (options) => {
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none",
       trailingClear: "p-0",
       arrow: "fill-bg stroke-default",
-      content: "max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] 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",
+      content: "max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col",
       viewport: "relative scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
       empty: "text-center text-muted",
@@ -3801,7 +3954,7 @@ const inputTime = (options) => {
     slots: {
       root: () => void 0,
       base: () => ["group relative inline-flex items-center rounded-md select-none", options.theme.transitions && "transition-colors"],
-      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"],
+      segment: ["rounded-sm 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"],
       separatorIcon: "shrink-0 size-4 text-muted"
     },
     variants: {
@@ -4119,13 +4272,13 @@ const marquee = {
     orientation: "horizontal",
     overlay: true,
     class: {
-      root: "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
+      root: "before:inset-y-0 before:start-0 before:h-full before:w-1/3 before:bg-gradient-to-r rtl:before:bg-gradient-to-l after:inset-y-0 after:end-0 after:h-full after:w-1/3 after:bg-gradient-to-l rtl:after:bg-gradient-to-r backface-hidden"
     }
   }, {
     orientation: "vertical",
     class: {
       root: "flex-col",
-      content: "flex-col motion-safe:animate-[marquee-vertical_var(--duration)_linear_infinite] motion-safe:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
+      content: "flex-col motion-safe:animate-[marquee-vertical_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
     }
   }, {
     orientation: "vertical",
@@ -4151,8 +4304,8 @@ const modal = {
   variants: {
     transition: {
       true: {
-        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
-        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+        overlay: "data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]",
+        content: "data-[state=open]:animate-[scale-in_200ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_200ms_var(--ease-out)]"
       }
     },
     fullscreen: {
@@ -4208,7 +4361,7 @@ const navigationMenu = (options) => ({
     linkTrailing: "group ms-auto inline-flex gap-1.5 items-center",
     linkTrailingBadge: "shrink-0",
     linkTrailingBadgeSize: "sm",
-    linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
+    linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none",
     linkLabel: "truncate",
     linkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
     childList: "isolate",
@@ -4222,9 +4375,9 @@ const navigationMenu = (options) => ({
     childLinkDescription: "text-muted",
     separator: "px-2 h-px bg-border",
     viewportWrapper: "absolute top-full start-0 flex w-full",
-    viewport: "relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left,right] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-1",
+    viewport: "relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left,right] duration-200 ease-out motion-reduce:transition-none origin-[top_center] data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] z-1",
     content: "",
-    indicator: "absolute left-0 data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-2 w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
+    indicator: "absolute left-0 data-[state=visible]:animate-[fade-in_100ms_var(--ease-out)] data-[state=hidden]:animate-[fade-out_100ms_var(--ease-out)] data-[state=hidden]:opacity-0 bottom-0 z-2 w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200 ease-out motion-reduce:transition-none",
     arrow: "relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-1 rounded-xs"
   },
   variants: {
@@ -4267,7 +4420,7 @@ const navigationMenu = (options) => ({
     contentOrientation: {
       horizontal: {
         viewportWrapper: "justify-center",
-        content: "data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
+        content: "data-[motion=from-start]:animate-[enter-from-left_200ms_var(--ease-out)] data-[motion=from-end]:animate-[enter-from-right_200ms_var(--ease-out)] data-[motion=to-start]:animate-[exit-to-left_200ms_var(--ease-out)] data-[motion=to-end]:animate-[exit-to-right_200ms_var(--ease-out)]"
       },
       vertical: {
         viewport: "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left) rtl:left-auto rtl:right-[calc(100%-var(--reka-navigation-menu-viewport-left)-var(--reka-navigation-menu-viewport-width))]"
@@ -4319,7 +4472,7 @@ const navigationMenu = (options) => ({
     class: {
       childList: "ms-5 border-s border-default",
       childItem: "ps-1.5 -ms-px",
-      content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden"
+      content: "data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden"
     }
   }, {
     orientation: "vertical",
@@ -5091,7 +5244,7 @@ const pinInput = (options) => ({
 
 const popover = {
   slots: {
-    content: "bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto",
+    content: "bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto",
     arrow: "fill-bg stroke-default"
   }
 };
@@ -5261,10 +5414,10 @@ const progress = (options) => ({
   slots: {
     root: "gap-2",
     base: "relative overflow-hidden rounded-full bg-accented",
-    indicator: "rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse",
-    status: "flex text-dimmed transition-[width] duration-200",
+    indicator: "rounded-full size-full transition-transform duration-200 ease-out motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-pulse",
+    status: "flex text-dimmed duration-200 ease-out motion-reduce:transition-none",
     steps: "grid items-end",
-    step: "truncate text-end row-start-1 col-start-1 transition-opacity"
+    step: "truncate text-end row-start-1 col-start-1 transition-opacity ease-out"
   },
   variants: {
     animation: {
@@ -5280,7 +5433,7 @@ const progress = (options) => ({
       }])),
       neutral: {
         indicator: "bg-inverted",
-        steps: "text-inverted"
+        steps: "text-highlighted"
       }
     },
     size: {
@@ -5331,12 +5484,12 @@ const progress = (options) => ({
       horizontal: {
         root: "w-full flex flex-col",
         base: "w-full",
-        status: "flex-row items-center justify-end min-w-fit"
+        status: "flex-row items-center justify-end w-(--percent) min-w-fit transition-[width]"
       },
       vertical: {
         root: "h-full flex flex-row-reverse",
         base: "h-full",
-        status: "flex-col justify-end min-h-fit"
+        status: "flex-col justify-end h-(--percent) min-h-fit transition-[height]"
       }
     },
     inverted: {
@@ -5419,49 +5572,49 @@ const progress = (options) => ({
     orientation: "horizontal",
     animation: "carousel",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel_2s_linear_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_linear_infinite]"
     }
   }, {
     orientation: "vertical",
     animation: "carousel",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_linear_infinite]"
     }
   }, {
     orientation: "horizontal",
     animation: "carousel-inverse",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-inverse_2s_linear_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_linear_infinite]"
     }
   }, {
     orientation: "vertical",
     animation: "carousel-inverse",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_linear_infinite]"
     }
   }, {
     orientation: "horizontal",
     animation: "swing",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[swing_2s_var(--ease-in-out)_infinite]"
     }
   }, {
     orientation: "vertical",
     animation: "swing",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[swing-vertical_2s_var(--ease-in-out)_infinite]"
     }
   }, {
     orientation: "horizontal",
     animation: "elastic",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
+      indicator: "relative motion-safe:data-[state=indeterminate]:animate-[elastic_2s_var(--ease-in-out)_infinite]"
     }
   }, {
     orientation: "vertical",
     animation: "elastic",
     class: {
-      indicator: "motion-safe:data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
+      indicator: "relative motion-safe:data-[state=indeterminate]:animate-[elastic-vertical_2s_var(--ease-in-out)_infinite]"
     }
   }],
   defaultVariants: {
@@ -5471,6 +5624,155 @@ const progress = (options) => ({
   }
 });
 
+const progressGroup = (options) => ({
+  slots: {
+    root: "gap-2",
+    base: "flex overflow-hidden rounded-full bg-accented",
+    segment: "duration-200 ease-out motion-reduce:transition-none",
+    indicator: "size-full",
+    status: "flex text-dimmed duration-200 ease-out motion-reduce:transition-none",
+    list: "flex flex-col gap-1",
+    item: "flex items-center gap-1.5 min-w-0",
+    itemLeadingIcon: "shrink-0",
+    itemLeadingDot: "shrink-0 rounded-full",
+    itemLabel: "truncate",
+    itemTrailing: "ms-auto shrink-0 text-dimmed"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        indicator: `bg-${color}`,
+        itemLeadingIcon: `text-${color}`,
+        itemLeadingDot: `bg-${color}`
+      }])),
+      neutral: {
+        indicator: "bg-inverted",
+        itemLeadingIcon: "text-highlighted",
+        itemLeadingDot: "bg-inverted"
+      }
+    },
+    size: {
+      "2xs": {
+        status: "text-xs",
+        list: "text-xs",
+        itemLeadingIcon: "size-3",
+        itemLeadingDot: "size-1.5"
+      },
+      "xs": {
+        status: "text-xs",
+        list: "text-xs",
+        itemLeadingIcon: "size-3",
+        itemLeadingDot: "size-1.5"
+      },
+      "sm": {
+        status: "text-sm",
+        list: "text-sm",
+        itemLeadingIcon: "size-4",
+        itemLeadingDot: "size-2"
+      },
+      "md": {
+        status: "text-sm",
+        list: "text-sm",
+        itemLeadingIcon: "size-4",
+        itemLeadingDot: "size-2"
+      },
+      "lg": {
+        status: "text-sm",
+        list: "text-sm",
+        itemLeadingIcon: "size-4",
+        itemLeadingDot: "size-2"
+      },
+      "xl": {
+        status: "text-base",
+        list: "text-base",
+        itemLeadingIcon: "size-5",
+        itemLeadingDot: "size-2.5"
+      },
+      "2xl": {
+        status: "text-base",
+        list: "text-base",
+        itemLeadingIcon: "size-5",
+        itemLeadingDot: "size-2.5"
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full flex flex-col",
+        base: "w-full flex-row",
+        segment: "h-full transition-[width]",
+        status: "flex-row items-center justify-end w-(--percent) min-w-fit transition-[width]"
+      },
+      vertical: {
+        root: "h-full flex flex-row",
+        base: "h-full flex-col",
+        segment: "w-full transition-[height]",
+        status: "flex-col justify-end h-(--percent) min-h-fit transition-[height]"
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    size: "2xs",
+    class: "h-px"
+  }, {
+    orientation: "horizontal",
+    size: "xs",
+    class: "h-0.5"
+  }, {
+    orientation: "horizontal",
+    size: "sm",
+    class: "h-1"
+  }, {
+    orientation: "horizontal",
+    size: "md",
+    class: "h-2"
+  }, {
+    orientation: "horizontal",
+    size: "lg",
+    class: "h-3"
+  }, {
+    orientation: "horizontal",
+    size: "xl",
+    class: "h-4"
+  }, {
+    orientation: "horizontal",
+    size: "2xl",
+    class: "h-5"
+  }, {
+    orientation: "vertical",
+    size: "2xs",
+    class: "w-px"
+  }, {
+    orientation: "vertical",
+    size: "xs",
+    class: "w-0.5"
+  }, {
+    orientation: "vertical",
+    size: "sm",
+    class: "w-1"
+  }, {
+    orientation: "vertical",
+    size: "md",
+    class: "w-2"
+  }, {
+    orientation: "vertical",
+    size: "lg",
+    class: "w-3"
+  }, {
+    orientation: "vertical",
+    size: "xl",
+    class: "w-4"
+  }, {
+    orientation: "vertical",
+    size: "2xl",
+    class: "w-5"
+  }],
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});
+
 const radioGroup = (options) => ({
   slots: {
     root: "relative",
@@ -5478,32 +5780,33 @@ const radioGroup = (options) => ({
     legend: "mb-1 block font-medium text-default",
     item: "flex items-start",
     container: "flex items-center",
-    base: "rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3",
+    base: "rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none",
     indicator: "flex items-center justify-center size-full after:bg-default after:rounded-full",
     wrapper: "w-full",
     label: "block font-medium text-default",
+    icon: "shrink-0",
     description: "text-muted"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `outline-${color}/25 focus-visible:ring-${color}`,
         indicator: `bg-${color}`
       }])),
       neutral: {
-        base: "outline-inverted/25 focus-visible:ring-inverted",
         indicator: "bg-inverted"
       }
     },
     variant: {
       list: {
+        fieldset: "flex-wrap",
         item: ""
       },
       card: {
-        item: "border border-muted rounded-lg"
+        fieldset: "flex-wrap",
+        item: [`border border-default rounded-lg ${hover}bg-elevated/50`, options.theme.transitions && "transition-colors"]
       },
       table: {
-        item: "border border-muted"
+        item: [`border border-default ${hover}bg-elevated/50`, options.theme.transitions && "transition-colors"]
       }
     },
     orientation: {
@@ -5525,7 +5828,7 @@ const radioGroup = (options) => ({
       },
       hidden: {
         base: "sr-only",
-        wrapper: "text-center"
+        wrapper: "flex flex-col items-center gap-1 text-center"
       }
     },
     size: {
@@ -5571,7 +5874,8 @@ const radioGroup = (options) => ({
       }
     },
     highlight: {
-      true: ""
+      true: "",
+      false: ""
     },
     disabled: {
       true: {
@@ -5588,6 +5892,24 @@ const radioGroup = (options) => ({
     }
   },
   compoundVariants: [
+    {
+      indicator: "hidden",
+      class: {
+        container: "h-auto"
+      }
+    },
+    {
+      variant: ["card", "table"],
+      highlight: false,
+      class: {
+        item: `${hover}border-accented`
+      }
+    },
+    { size: "xs", indicator: "hidden", class: { icon: "size-3" } },
+    { size: "sm", indicator: "hidden", class: { icon: "size-3.5" } },
+    { size: "md", indicator: "hidden", class: { icon: "size-4" } },
+    { size: "lg", indicator: "hidden", class: { icon: "size-4.5" } },
+    { size: "xl", indicator: "hidden", class: { icon: "size-5" } },
     { size: "xs", variant: ["card", "table"], class: { item: "p-2.5" } },
     { size: "sm", variant: ["card", "table"], class: { item: "p-3" } },
     { size: "md", variant: ["card", "table"], class: { item: "p-3.5" } },
@@ -5609,18 +5931,41 @@ const radioGroup = (options) => ({
         fieldset: "gap-0 -space-y-px"
       }
     },
+    ...[...(options.theme.colors || []).map((color) => [color, color]), ["neutral", "inverted"]].map(([color, token]) => ({
+      color,
+      variant: "list",
+      indicator: ["start", "end"],
+      class: {
+        base: focusControl(token)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color) => [color, color]), ["neutral", "inverted"]].map(([color, token]) => ({
+      color,
+      variant: ["card", "table"],
+      class: {
+        item: focusCard(token)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color) => [color, color]), ["neutral", "inverted"]].map(([color, token]) => ({
+      color,
+      variant: "list",
+      indicator: "hidden",
+      class: {
+        item: focusCard(token)
+      }
+    })),
     ...(options.theme.colors || []).map((color) => ({
       color,
       variant: "card",
       class: {
-        item: `has-data-[state=checked]:border-${color}`
+        item: `has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:bg-${color}/10`
       }
     })),
     {
       color: "neutral",
       variant: "card",
       class: {
-        item: "has-data-[state=checked]:border-inverted"
+        item: "has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated"
       }
     },
     ...(options.theme.colors || []).map((color) => ({
@@ -5644,6 +5989,22 @@ const radioGroup = (options) => ({
         item: "cursor-not-allowed"
       }
     },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      indicator: "hidden",
+      highlight: true,
+      class: {
+        item: `not-has-disabled:border-${color} not-has-disabled:has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      indicator: "hidden",
+      highlight: true,
+      class: {
+        item: "not-has-disabled:border-inverted not-has-disabled:has-data-[state=checked]:border-inverted"
+      }
+    },
     ...(options.theme.colors || []).map((color) => ({
       color,
       highlight: true,
@@ -5660,6 +6021,7 @@ const radioGroup = (options) => ({
     }
   ],
   defaultVariants: {
+    highlight: false,
     size: "md",
     color: "primary",
     variant: "list",
@@ -5729,7 +6091,6 @@ const select = (options) => {
       }),
       size: {
         xs: {
-          base: "px-2 py-1 text-xs gap-1",
           label: "p-1 text-[10px]/3 gap-1",
           item: "p-1 text-xs gap-1",
           itemLeadingIcon: "size-4",
@@ -5740,7 +6101,6 @@ const select = (options) => {
           empty: "p-2 text-xs"
         },
         sm: {
-          base: "px-2.5 py-1.5 text-xs gap-1.5",
           label: "p-1.5 text-[10px]/3 gap-1.5",
           item: "p-1.5 text-xs gap-1.5",
           itemLeadingIcon: "size-4",
@@ -5751,7 +6111,6 @@ const select = (options) => {
           empty: "p-2.5 text-xs"
         },
         md: {
-          base: "px-2.5 py-1.5 text-sm gap-1.5",
           label: "p-1.5 text-xs gap-1.5",
           item: "p-1.5 text-sm gap-1.5",
           itemLeadingIcon: "size-5",
@@ -5762,7 +6121,6 @@ const select = (options) => {
           empty: "p-2.5 text-sm"
         },
         lg: {
-          base: "px-3 py-2 text-sm gap-2",
           label: "p-2 text-xs gap-2",
           item: "p-2 text-sm gap-2",
           itemLeadingIcon: "size-5",
@@ -5773,7 +6131,6 @@ const select = (options) => {
           empty: "p-3 text-sm"
         },
         xl: {
-          base: "px-3 py-2 text-base gap-2",
           label: "p-2 text-sm gap-2",
           item: "p-2 text-base gap-2",
           itemLeadingIcon: "size-6",
@@ -5786,7 +6143,7 @@ const select = (options) => {
       },
       position: {
         "popper": {
-          content: "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
+          content: "data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)]"
         },
         "item-aligned": {
           content: ""
@@ -5966,9 +6323,8 @@ const sidebar = (options) => ({
   variants: {
     transition: {
       true: {
-        gap: "transition-[width] duration-200 ease-out",
-        container: "transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-out",
-        rail: "transition-all ease-out"
+        gap: "transition-[width] duration-200 ease-out motion-reduce:transition-none",
+        container: "transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-out motion-reduce:transition-none"
       }
     },
     side: {
@@ -6119,7 +6475,7 @@ const slideover = {
     },
     transition: {
       true: {
-        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
+        overlay: "data-[state=open]:animate-[fade-in_200ms_var(--ease-out)] data-[state=closed]:animate-[fade-out_200ms_var(--ease-out)]"
       }
     }
   },
@@ -6175,25 +6531,25 @@ const slideover = {
     transition: true,
     side: "top",
     class: {
-      content: "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
+      content: "data-[state=open]:animate-[slide-in-from-top_200ms_var(--ease-out)] data-[state=closed]:animate-[slide-out-to-top_200ms_var(--ease-out)]"
     }
   }, {
     transition: true,
     side: "right",
     class: {
-      content: "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
+      content: "data-[state=open]:animate-[slide-in-from-right_200ms_var(--ease-out)] data-[state=closed]:animate-[slide-out-to-right_200ms_var(--ease-out)]"
     }
   }, {
     transition: true,
     side: "bottom",
     class: {
-      content: "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
+      content: "data-[state=open]:animate-[slide-in-from-bottom_200ms_var(--ease-out)] data-[state=closed]:animate-[slide-out-to-bottom_200ms_var(--ease-out)]"
     }
   }, {
     transition: true,
     side: "left",
     class: {
-      content: "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
+      content: "data-[state=open]:animate-[slide-in-from-left_200ms_var(--ease-out)] data-[state=closed]:animate-[slide-out-to-left_200ms_var(--ease-out)]"
     }
   }]
 };
@@ -6316,6 +6672,24 @@ const slider = (options) => ({
   }
 });
 
+const splitter = {
+  slots: {
+    root: "",
+    panel: "flex",
+    handle: "group relative shrink-0 focus-visible:outline-2 focus-visible:outline-primary data-[panel-resize-handle-enabled=false]:cursor-default"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        handle: "w-2 cursor-col-resize"
+      },
+      vertical: {
+        handle: "h-2 cursor-row-resize"
+      }
+    }
+  }
+};
+
 const inputRating = (options) => ({
   slots: {
     root: "",
@@ -6520,10 +6894,10 @@ const stepper = (options) => ({
 const _switch = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-3 data-[state=unchecked]:bg-accented", options.theme.transitions && "transition-[background] duration-200"],
+    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-3 data-[state=unchecked]:bg-accented", options.theme.transitions && "transition-[background] duration-200 ease-out"],
     container: "flex items-center",
-    thumb: "group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
-    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
+    thumb: "group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 ease-out motion-reduce:transition-none data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
+    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200 ease-out"],
     wrapper: "ms-2",
     label: "block font-medium text-default",
     description: "text-muted"
@@ -6649,14 +7023,14 @@ const table$1 = (options) => ({
     },
     sticky: {
       true: {
-        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"
+        thead: "sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1",
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1"
       },
       header: {
-        thead: "sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1"
+        thead: "sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1"
       },
       footer: {
-        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur z-1"
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1"
       }
     },
     loading: {
@@ -6696,25 +7070,25 @@ const table$1 = (options) => ({
     loading: true,
     loadingAnimation: "carousel",
     class: {
-      thead: "motion-safe:after:animate-[carousel_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]"
+      thead: "motion-safe:after:animate-[carousel_2s_linear_infinite] motion-safe:rtl:after:animate-[carousel-rtl_2s_linear_infinite]"
     }
   }, {
     loading: true,
     loadingAnimation: "carousel-inverse",
     class: {
-      thead: "motion-safe:after:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
+      thead: "motion-safe:after:animate-[carousel-inverse_2s_linear_infinite] motion-safe:rtl:after:animate-[carousel-inverse-rtl_2s_linear_infinite]"
     }
   }, {
     loading: true,
     loadingAnimation: "swing",
     class: {
-      thead: "motion-safe:after:animate-[swing_2s_ease-in-out_infinite]"
+      thead: "motion-safe:after:animate-[swing_2s_var(--ease-in-out)_infinite]"
     }
   }, {
     loading: true,
     loadingAnimation: "elastic",
     class: {
-      thead: "motion-safe:after:animate-[elastic_2s_ease-in-out_infinite]"
+      thead: "motion-safe:after:animate-[elastic_2s_var(--ease-in-out)_infinite]"
     }
   }],
   defaultVariants: {
@@ -6728,7 +7102,7 @@ const tabs$1 = (options) => ({
   slots: {
     root: "flex items-center gap-2",
     list: "relative flex p-1 group",
-    indicator: "absolute transition-[translate,width] duration-200",
+    indicator: "absolute transition-[translate,width] duration-200 ease-out motion-reduce:transition-none",
     trigger: ["group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -7138,7 +7512,7 @@ const toast = (options) => ({
 const toaster = {
   slots: {
     viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
-    base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[state=open]:data-[pulsing=odd]:animate-[toast-pulse-a_300ms_ease-out] data-[state=open]:data-[pulsing=even]:animate-[toast-pulse-b_300ms_ease-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_var(--ease-out)] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_var(--ease-out)] motion-safe:data-[state=open]:data-[pulsing=odd]:animate-[toast-pulse-a_200ms_var(--ease-out)] motion-safe:data-[state=open]:data-[pulsing=even]:animate-[toast-pulse-b_200ms_var(--ease-out)] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out motion-reduce:transition-none"
   },
   variants: {
     position: {
@@ -7162,23 +7536,23 @@ const toaster = {
       }
     },
     swipeDirection: {
-      up: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]",
-      right: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]",
-      down: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]",
-      left: "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
+      up: "data-[swipe=end]:animate-[toast-slide-up_200ms_var(--ease-out)]",
+      right: "data-[swipe=end]:animate-[toast-slide-right_200ms_var(--ease-out)]",
+      down: "data-[swipe=end]:animate-[toast-slide-down_200ms_var(--ease-out)]",
+      left: "data-[swipe=end]:animate-[toast-slide-left_200ms_var(--ease-out)]"
     }
   },
   compoundVariants: [{
     position: ["top-left", "top-center", "top-right"],
     class: {
       viewport: "top-4",
-      base: "top-0 data-[state=open]:animate-[toast-slide-in-from-top_200ms_ease-in-out]"
+      base: "top-0 data-[state=open]:animate-[toast-slide-in-from-top_200ms_var(--ease-out)]"
     }
   }, {
     position: ["bottom-left", "bottom-center", "bottom-right"],
     class: {
       viewport: "bottom-4",
-      base: "bottom-0 data-[state=open]:animate-[toast-slide-in-from-bottom_200ms_ease-in-out]"
+      base: "bottom-0 data-[state=open]:animate-[toast-slide-in-from-bottom_200ms_var(--ease-out)]"
     }
   }, {
     swipeDirection: ["left", "right"],
@@ -7194,7 +7568,7 @@ const toaster = {
 
 const tooltip = {
   slots: {
-    content: "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
+    content: "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
     arrow: "fill-bg stroke-default",
     text: "truncate",
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['\xB7'] not-first-of-type:before:me-0.5`,
@@ -7212,7 +7586,7 @@ const tree = (options) => ({
     linkLeadingIcon: "shrink-0 relative",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
+    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 ease-out motion-reduce:transition-none group-data-expanded:rotate-180"
   },
   variants: {
     virtualize: {
@@ -7318,7 +7692,7 @@ const user = (options) => ({
         root: ["rounded-md outline-primary/25 has-focus-visible:outline-3", options.theme.transitions && "transition"],
         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"
+        avatar: "transform transition-transform ease-out motion-reduce:transition-none group-hover/user:scale-115 group-has-focus-visible/user:scale-115"
       },
       false: {
         name: "text-highlighted",
@@ -7478,6 +7852,7 @@ const theme = {
   pricingPlans: pricingPlans,
   pricingTable: pricingTable,
   progress: progress,
+  progressGroup: progressGroup,
   radioGroup: radioGroup,
   scrollArea: scrollArea,
   select: select,
@@ -7487,6 +7862,7 @@ const theme = {
   skeleton: skeleton,
   slideover: slideover,
   slider: slider,
+  splitter: splitter,
   stepper: stepper,
   switch: _switch,
   table: table$1,
@@ -7653,7 +8029,7 @@ const codeGroup = (options) => ({
   slots: {
     root: "relative group *:not-first:my-0! *:not-first:static! my-5",
     list: "relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2",
-    indicator: "absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs",
+    indicator: "absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 ease-out motion-reduce:transition-none bg-elevated rounded-md shadow-xs",
     trigger: ["relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 outline-primary/25 focus-visible:outline-3", options.theme.transitions && "transition-colors"],
     triggerIcon: "size-4 shrink-0",
     triggerLabel: "truncate"
@@ -7661,71 +8037,71 @@ const codeGroup = (options) => ({
 });
 
 const codeIcon = {
-  "package.json": "i-vscode-icons-file-type-node",
-  "tsconfig.json": "i-vscode-icons-file-type-tsconfig",
-  ".npmrc": "i-vscode-icons-file-type-npm",
   ".editorconfig": "i-vscode-icons-file-type-editorconfig",
+  ".env": "i-vscode-icons-file-type-dotenv",
+  ".env.example": "i-vscode-icons-file-type-dotenv",
+  ".eslintignore": "i-vscode-icons-file-type-eslint",
   ".eslintrc": "i-vscode-icons-file-type-eslint",
   ".eslintrc.cjs": "i-vscode-icons-file-type-eslint",
-  ".eslintignore": "i-vscode-icons-file-type-eslint",
-  "eslint.config.js": "i-vscode-icons-file-type-eslint",
-  "eslint.config.mjs": "i-vscode-icons-file-type-eslint",
-  "eslint.config.cjs": "i-vscode-icons-file-type-eslint",
   ".gitignore": "i-vscode-icons-file-type-git",
-  "yarn.lock": "i-vscode-icons-file-type-yarn",
-  ".env": "i-vscode-icons-file-type-dotenv",
-  ".env.example": "i-vscode-icons-file-type-dotenv",
-  ".vscode/settings.json": "i-vscode-icons-file-type-vscode",
-  "nuxt": "i-vscode-icons-file-type-nuxt",
-  ".nuxtrc": "i-vscode-icons-file-type-nuxt",
+  ".npmrc": "i-vscode-icons-file-type-npm",
   ".nuxtignore": "i-vscode-icons-file-type-nuxt",
-  "nuxt.config.js": "i-vscode-icons-file-type-nuxt",
-  "nuxt.config.ts": "i-vscode-icons-file-type-nuxt",
-  "nuxt.schema.ts": "i-vscode-icons-file-type-nuxt",
-  "tailwind.config.js": "i-vscode-icons-file-type-tailwind",
-  "tailwind.config.ts": "i-vscode-icons-file-type-tailwind",
-  "vue": "i-vscode-icons-file-type-vue",
-  "ts": "i-vscode-icons-file-type-typescript",
-  "tsx": "i-vscode-icons-file-type-typescript",
-  "mjs": "i-vscode-icons-file-type-js",
+  ".nuxtrc": "i-vscode-icons-file-type-nuxt",
+  ".vscode/settings.json": "i-vscode-icons-file-type-vscode",
+  "asm": "i-vscode-icons-file-type-assembly",
+  "bicep": "i-vscode-icons-file-type-bicep",
+  "bicepparam": "i-vscode-icons-file-type-bicep",
+  "bun": "i-vscode-icons-file-type-bun",
   "cjs": "i-vscode-icons-file-type-js",
-  "js": "i-vscode-icons-file-type-js",
-  "jsx": "i-vscode-icons-file-type-js",
-  "md": "i-vscode-icons-file-type-markdown",
-  "py": "i-vscode-icons-file-type-python",
   "cs": "i-vscode-icons-file-type-csharp",
-  "asm": "i-vscode-icons-file-type-assembly",
+  "dart": "i-vscode-icons-file-type-dartlang",
+  "deno": "i-vscode-icons-file-type-deno",
+  "erl": "i-vscode-icons-file-type-erlang",
+  "eslint.config.cjs": "i-vscode-icons-file-type-eslint",
+  "eslint.config.js": "i-vscode-icons-file-type-eslint",
+  "eslint.config.mjs": "i-vscode-icons-file-type-eslint",
+  "exs": "i-vscode-icons-file-type-elixir",
   "f": "i-vscode-icons-file-type-fortran",
-  "hs": "i-vscode-icons-file-type-haskell",
   "fs": "i-vscode-icons-file-type-fsharp",
-  "kt": "i-vscode-icons-file-type-kotlin",
-  "rs": "i-vscode-icons-file-type-rust",
-  "rb": "i-vscode-icons-file-type-ruby",
-  "lsp": "i-vscode-icons-file-type-lisp",
-  "ps1": "i-vscode-icons-file-type-powershell",
-  "psd1": "i-vscode-icons-file-type-powershell",
-  "psm1": "i-vscode-icons-file-type-powershell",
-  "go": "i-vscode-icons-file-type-go",
   "gleam": "i-vscode-icons-file-type-gleam",
-  "bicep": "i-vscode-icons-file-type-bicep",
-  "bicepparam": "i-vscode-icons-file-type-bicep",
-  "exs": "i-vscode-icons-file-type-elixir",
-  "erl": "i-vscode-icons-file-type-erlang",
-  "sbt": "i-vscode-icons-file-type-scala",
+  "go": "i-vscode-icons-file-type-go",
   "h": "i-vscode-icons-file-type-cppheader",
+  "hs": "i-vscode-icons-file-type-haskell",
+  "ico": "i-vscode-icons-file-type-favicon",
   "ino": "i-vscode-icons-file-type-arduino",
-  "pl": "i-vscode-icons-file-type-perl",
   "jl": "i-vscode-icons-file-type-julia",
-  "dart": "i-vscode-icons-file-type-dartlang",
-  "ico": "i-vscode-icons-file-type-favicon",
+  "js": "i-vscode-icons-file-type-js",
+  "jsx": "i-vscode-icons-file-type-js",
+  "kt": "i-vscode-icons-file-type-kotlin",
+  "lsp": "i-vscode-icons-file-type-lisp",
+  "md": "i-vscode-icons-file-type-markdown",
+  "mjs": "i-vscode-icons-file-type-js",
   "npm": "i-vscode-icons-file-type-npm",
-  "pnpm": "i-vscode-icons-file-type-pnpm",
   "npx": "i-vscode-icons-file-type-npm",
+  "nuxt": "i-vscode-icons-file-type-nuxt",
+  "nuxt.config.js": "i-vscode-icons-file-type-nuxt",
+  "nuxt.config.ts": "i-vscode-icons-file-type-nuxt",
+  "nuxt.schema.ts": "i-vscode-icons-file-type-nuxt",
+  "package.json": "i-vscode-icons-file-type-node",
+  "pl": "i-vscode-icons-file-type-perl",
+  "pnpm": "i-vscode-icons-file-type-pnpm",
+  "ps1": "i-vscode-icons-file-type-powershell",
+  "psd1": "i-vscode-icons-file-type-powershell",
+  "psm1": "i-vscode-icons-file-type-powershell",
+  "py": "i-vscode-icons-file-type-python",
+  "rb": "i-vscode-icons-file-type-ruby",
+  "rs": "i-vscode-icons-file-type-rust",
+  "sbt": "i-vscode-icons-file-type-scala",
+  "tailwind.config.js": "i-vscode-icons-file-type-tailwind",
+  "tailwind.config.ts": "i-vscode-icons-file-type-tailwind",
+  "terminal": "i-lucide-terminal",
+  "ts": "i-vscode-icons-file-type-typescript",
+  "tsconfig.json": "i-vscode-icons-file-type-tsconfig",
+  "tsx": "i-vscode-icons-file-type-typescript",
+  "vue": "i-vscode-icons-file-type-vue",
   "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"
+  "yarn.lock": "i-vscode-icons-file-type-yarn",
+  "yml": "i-vscode-icons-file-type-yaml"
 };
 
 const codePreview = {
@@ -7754,7 +8130,7 @@ const codeTree = (options) => ({
     linkLeadingIcon: "size-4 shrink-0",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-expanded:rotate-180",
+    linkTrailingIcon: "size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-expanded:rotate-180",
     content: "overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-s-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto"
   },
   variants: {
@@ -7773,7 +8149,7 @@ const collapsible = (options) => ({
   slots: {
     root: "my-5",
     trigger: ["group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm outline-primary/25 focus-visible:outline-3", options.theme.transitions && "transition-colors"],
-    triggerIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
+    triggerIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none",
     triggerLabel: "truncate",
     content: "*:first:mt-2.5 *:last:mb-0 *:my-1.5"
   }
@@ -8036,7 +8412,7 @@ const themeProse = {
 const contentNavigation = (options) => ({
   slots: {
     root: "",
-    content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] data-[state=closed]:overflow-hidden focus:outline-none",
+    content: "data-[state=open]:animate-[accordion-down_200ms_var(--ease-out)] data-[state=closed]:animate-[accordion-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none",
     list: "isolate -mx-2.5 -mt-1.5",
     item: "",
     listWithChildren: "ms-5 border-s border-default",
@@ -8047,7 +8423,7 @@ const contentNavigation = (options) => ({
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
     linkTrailingBadge: "shrink-0",
     linkTrailingBadgeSize: "sm",
-    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180",
+    linkTrailingIcon: "size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180",
     linkTitle: "truncate",
     linkTitleExternalIcon: "size-3 align-top text-dimmed"
   },
@@ -8230,7 +8606,7 @@ const contentSurround = (options) => ({
     root: "grid grid-cols-1 sm:grid-cols-2 gap-8",
     link: ["group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary", options.theme.transitions && "transition-colors"],
     linkLeading: ["inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50", options.theme.transitions && "transition"],
-    linkLeadingIcon: ["size-5 shrink-0 text-highlighted group-hover:text-primary", options.theme.transitions && "transition-[color,translate]"],
+    linkLeadingIcon: ["size-5 shrink-0 text-highlighted group-hover:text-primary", options.theme.transitions && "transition-[color,translate] ease-out motion-reduce:transition-none"],
     linkTitle: "font-medium text-[15px] text-highlighted mb-1 truncate",
     linkDescription: "text-sm text-muted line-clamp-2"
   },
@@ -8249,15 +8625,15 @@ const contentSurround = (options) => ({
 
 const contentToc = (options) => ({
   slots: {
-    root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto lg:overflow-hidden max-h-[calc(100vh-var(--ui-header-height))]",
+    root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
     container: "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0",
     top: "lg:shrink-0",
     bottom: "hidden lg:flex lg:flex-col lg:shrink-0 gap-6",
     trigger: "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0",
     title: "truncate",
     trailing: "ms-auto inline-flex gap-1.5 items-center",
-    trailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
-    content: "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-0 lg:overflow-y-auto lg:scrollbar-none",
+    trailingIcon: "size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
+    content: "relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none",
     list: "min-w-0",
     listWithChildren: "ms-3",
     item: "min-w-0",
@@ -8317,7 +8693,7 @@ const contentToc = (options) => ({
     class: {
       list: "ms-2.5 ps-4 border-s border-default",
       item: "-ms-px",
-      indicator: "absolute ms-2.5 transition-[translate,height] duration-200 h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full",
+      indicator: "absolute ms-2.5 transition-[translate,height] duration-200 ease-out motion-reduce:transition-none h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full",
       indicatorLine: "hidden",
       indicatorActive: "w-full h-full"
     }
@@ -8330,7 +8706,7 @@ const contentToc = (options) => ({
       itemWithChildren: "ps-px",
       indicator: "absolute ms-2.5 start-0 top-0 rtl:-scale-x-100",
       indicatorLine: "absolute inset-0 bg-(--ui-border)",
-      indicatorActive: "absolute w-full h-(--indicator-size) translate-y-(--indicator-position) transition-[translate,height] duration-200 ease-out"
+      indicatorActive: "absolute w-full h-(--indicator-size) translate-y-(--indicator-position) transition-[translate,height] duration-200 ease-out motion-reduce:transition-none"
     }
   }],
   defaultVariants: {
@@ -8349,7 +8725,7 @@ const themeContent = {
   contentToc: contentToc
 };
 
-function getTemplates(options, uiConfig, nuxt, resolve) {
+function getTemplates(options, uiConfig, nuxt, resolve, vue) {
   const templates = [];
   let hasProse = false;
   let hasContent = false;
@@ -8362,8 +8738,9 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
         getContents: async () => {
           const template = theme2[component];
           let result = typeof template === "function" ? template(options) : template;
+          const unused = path !== "prose" && !!vue?.detectedComponents?.size && !Array.from(vue.detectedComponents).some((detected) => camelCase(detected) === component);
           result = applyDefaultVariants(result, options.theme?.defaultVariants);
-          result = applyUnstyled(result, options.theme?.unstyled);
+          result = applyUnstyled(result, options.theme?.unstyled || unused);
           result = applyPrefixToObject(result, options.theme?.prefix);
           const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
             const keys = Object.keys(values);
@@ -8407,29 +8784,29 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
   }
   writeThemeTemplate(theme);
   async function generateSources() {
-    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)});`);
+    const layers = nuxt ? getLayerDirectories(nuxt).map((layer) => layer.app) : [];
+    if (nuxt) {
+      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 componentDir = resolve ? resolve("./runtime/components") : void 0;
+    if (options.experimental?.componentDetection && nuxt && componentDir && layers.length) {
       const detectedComponents = await detectUsedComponents(
         layers,
         options.prefix,
-        resolve("./runtime/components"),
+        componentDir,
         Array.isArray(options.experimental.componentDetection) ? options.experimental.componentDetection : void 0
       );
       if (detectedComponents && detectedComponents.size > 0) {
@@ -8633,7 +9010,7 @@ function addTemplates(options, nuxt, resolve) {
   });
   if (options.experimental?.componentDetection && nuxt.options.dev) {
     nuxt.hook("builder:watch", async (_, path) => {
-      if (/\.(?:vue|ts|js|tsx|jsx)$/.test(path)) {
+      if (/\.(?:vue|ts|mts|js|mjs|cjs|tsx|jsx)$/.test(path)) {
         await updateTemplates({ filter: (template) => template.filename === "ui.css" });
       }
     });
@@ -8694,4 +9071,4 @@ function getClientBundleIcons(icons = {}) {
   return [...names];
 }
 
-export { addTemplates as a, getDefaultConfig as b, getTemplates as c, defaultOptions as d, publicComposables as e, getClientBundleIcons as g, parseIconName as p, resolveColors as r };
+export { addTemplates as a, detectUsedComponents as b, getDefaultConfig as c, defaultOptions as d, getTemplates as e, publicComposables as f, getClientBundleIcons as g, resolveExtraScanDirs as h, parseIconName as p, resolveColors as r };