@nuxt/ui 4.8.2 → 4.10.0

package/dist/shared/{ui.C-lVg1QQ.mjs → ui.XkBrgXFP.mjs}

@@ -9,7 +9,7 @@ import { join } from 'pathe';
 import { globSync } from 'tinyglobby';
 import { defuFn, defu } from 'defu';
 
-const icons = {
+const defaultIcons = {
   arrowDown: "i-lucide-arrow-down",
   arrowLeft: "i-lucide-arrow-left",
   arrowRight: "i-lucide-arrow-right",
@@ -47,6 +47,7 @@ const icons = {
   reload: "i-lucide-rotate-ccw",
   search: "i-lucide-search",
   stop: "i-lucide-square",
+  star: "i-lucide-star",
   success: "i-lucide-circle-check",
   system: "i-lucide-monitor",
   tip: "i-lucide-lightbulb",
@@ -68,7 +69,7 @@ function getDefaultConfig(theme) {
       error: "red",
       neutral: "slate"
     }, [...theme?.colors || [], "neutral"]),
-    icons,
+    icons: defaultIcons,
     prefix: theme?.prefix,
     tv: {
       twMergeConfig: {
@@ -84,6 +85,7 @@ const defaultOptions = {
   theme: {
     colors: void 0,
     transitions: true,
+    unstyled: false,
     defaultVariants: {
       color: void 0,
       size: void 0
@@ -131,6 +133,30 @@ function applyPrefixToObject(obj, prefix, context = []) {
   }
   return obj;
 }
+function applyUnstyled(result, unstyled) {
+  if (!result || !unstyled) {
+    return result;
+  }
+  const blank = (value) => value && typeof value === "object" && !Array.isArray(value) ? Object.fromEntries(Object.keys(value).map((slot) => [slot, ""])) : "";
+  if (result.slots) {
+    result.slots = Object.fromEntries(Object.keys(result.slots).map((slot) => [slot, ""]));
+  }
+  if (result.variants) {
+    result.variants = Object.fromEntries(
+      Object.entries(result.variants).map(([name, group]) => [
+        name,
+        Object.fromEntries(Object.entries(group).map(([key, value]) => [key, blank(value)]))
+      ])
+    );
+  }
+  if (result.compoundVariants) {
+    result.compoundVariants = result.compoundVariants.map((entry) => {
+      const { class: cls, ...selectors } = entry;
+      return { ...selectors, class: blank(cls) };
+    });
+  }
+  return result;
+}
 function applyDefaultVariants(result, defaultVariants) {
   if (!result || !defaultVariants) {
     return result;
@@ -228,8 +254,8 @@ const accordion$1 = {
     root: "w-full",
     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 focus-visible:outline-primary min-w-0",
-    content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
+    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",
     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",
@@ -635,7 +661,9 @@ const banner = (options) => ({
       }
     },
     to: {
-      true: ""
+      true: {
+        root: "outline-(--ui-bg)/25 -outline-offset-3 has-[>a:focus-visible]:outline-3"
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -712,9 +740,9 @@ const blogPost = (options) => ({
     },
     to: {
       true: {
-        root: ["has-focus-visible:ring-2 has-focus-visible:ring-primary", options.theme.transitions && "transition"],
+        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: "transform transition-transform duration-200 hover:scale-115 focus-visible:outline-primary"
+        avatar: "inline-flex transform transition-transform duration-200 hover:scale-115 rounded-full outline-primary/25 focus-visible:outline-3"
       }
     },
     image: {
@@ -739,6 +767,12 @@ const blogPost = (options) => ({
     class: {
       root: "hover:bg-elevated hover:ring-accented"
     }
+  }, {
+    variant: ["outline", "subtle"],
+    to: true,
+    class: {
+      root: "has-[>a:focus-visible]:ring-primary"
+    }
   }, {
     variant: "ghost",
     to: true,
@@ -758,7 +792,7 @@ const blogPost = (options) => ({
     to: true,
     orientation: "horizontal",
     class: {
-      header: "group-hover/blog-post:rounded-r-none"
+      header: "group-hover/blog-post:rounded-e-none"
     }
   }, {
     orientation: "vertical",
@@ -788,7 +822,7 @@ const breadcrumb = (options) => ({
     root: "relative min-w-0",
     list: "flex items-center gap-1.5",
     item: "flex min-w-0",
-    link: "group relative flex items-center gap-1.5 text-sm min-w-0",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0 rounded-md",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
@@ -814,8 +848,8 @@ const breadcrumb = (options) => ({
       true: ""
     },
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { link: `focus-visible:outline-${color}` }])),
-      neutral: { link: "focus-visible:outline-inverted" }
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { link: `outline-${color}/25 focus-visible:outline-3` }])),
+      neutral: { link: "outline-inverted/25 focus-visible:outline-3" }
     }
   },
   compoundVariants: [{
@@ -928,51 +962,51 @@ const button = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `text-inverted bg-${color} hover:bg-${color}/75 active:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
+    class: `text-inverted bg-${color} hover:bg-${color}/75 active:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} outline-${color}/25 focus-visible:outline-3`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 active:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+    class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 active:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-${color}/25 focus-visible:outline-3 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `text-${color} bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
+    class: `text-${color} bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 outline-${color}/25 focus-visible:outline-3 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+    class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 outline-${color}/25 focus-visible:outline-3 focus-visible:ring-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "ghost",
-    class: `text-${color} hover:bg-${color}/10 active:bg-${color}/10 focus:outline-none focus-visible:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+    class: `text-${color} hover:bg-${color}/10 active:bg-${color}/10 outline-${color}/25 focus-visible:outline-3 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
-    class: `text-${color} hover:text-${color}/75 active:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    class: `text-${color} hover:text-${color}/75 active:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} outline-${color}/25 focus-visible:outline-3`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+    class: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted outline-inverted/25 focus-visible:outline-3"
   }, {
     color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+    class: "ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"
   }, {
     color: "neutral",
     variant: "soft",
-    class: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
+    class: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 outline-inverted/25 focus-visible:outline-3 disabled:bg-elevated aria-disabled:bg-elevated"
   }, {
     color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+    class: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"
   }, {
     color: "neutral",
     variant: "ghost",
-    class: "text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
+    class: "text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
   }, {
     color: "neutral",
     variant: "link",
-    class: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
+    class: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3"
   }, {
     size: "xs",
     square: true,
@@ -1014,31 +1048,46 @@ const button = (options) => ({
   }
 });
 
+const daySizes = {
+  xs: "size-7",
+  sm: "size-7",
+  md: "size-8",
+  lg: "size-9 text-md",
+  xl: "size-10 text-lg"
+};
+const pickerSizes = {
+  xs: "h-7 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"
+};
 const calendar = (options) => ({
   slots: {
     root: "",
     header: "flex items-center justify-between",
     body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
-    heading: "text-center font-medium truncate mx-auto",
+    heading: "flex-1 min-w-0 text-center",
+    headingLabel: "font-medium block truncate p-1.5",
     grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
-    gridRow: "grid grid-cols-7 place-items-center",
+    gridRow: "grid",
     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 whitespace-nowrap focus-visible:outline-3 data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold", options.theme.transitions && "transition"],
     cellWeek: "relative text-center text-muted"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         headCell: `text-${color}`,
-        cellTrigger: `focus-visible:ring-${color}`
+        cellTrigger: `outline-${color}/25`
       }])),
       neutral: {
         headCell: "text-highlighted",
-        cellTrigger: "focus-visible:ring-inverted"
+        cellTrigger: "outline-inverted/25"
       }
     },
     variant: {
@@ -1049,103 +1098,137 @@ const calendar = (options) => ({
     },
     size: {
       xs: {
-        heading: "text-xs",
+        headingLabel: "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",
+        headingLabel: "text-xs",
         headCell: "text-xs",
         headCellWeek: "text-xs",
         cellWeek: "text-xs",
-        cell: "text-xs",
-        cellTrigger: "size-7"
+        cell: "text-xs"
       },
       md: {
-        heading: "text-sm",
+        headingLabel: "text-sm",
         headCell: "text-xs",
         headCellWeek: "text-xs",
         cellWeek: "text-xs",
-        cell: "text-sm",
-        cellTrigger: "size-8"
+        cell: "text-sm"
       },
       lg: {
-        heading: "text-md",
+        headingLabel: "text-md",
         headCell: "text-md",
-        headCellWeek: "text-md",
-        cellTrigger: "size-9 text-md"
+        headCellWeek: "text-md"
       },
       xl: {
-        heading: "text-lg",
+        headingLabel: "text-lg",
         headCell: "text-lg",
-        headCellWeek: "text-lg",
-        cellTrigger: "size-10 text-lg"
+        headCellWeek: "text-lg"
+      }
+    },
+    view: {
+      day: {
+        gridRow: "grid-cols-7 place-items-center",
+        cellTrigger: "rounded-full data-outside-view:text-muted"
+      },
+      month: {
+        gridRow: "grid-cols-4",
+        cellTrigger: "rounded-md"
+      },
+      year: {
+        gridRow: "grid-cols-4",
+        cellTrigger: "rounded-md"
       }
     },
     weekNumbers: {
-      true: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        cellTrigger: `data-selected:bg-${color} data-selected:text-inverted data-today:not-data-selected:text-${color} data-highlighted:bg-${color}/20 hover:not-data-selected:bg-${color}/20`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        cellTrigger: `data-selected:ring data-selected:ring-inset data-selected:ring-${color}/50 data-selected:text-${color} data-selected:focus-visible:ring-${color} data-today:not-data-selected:text-${color} data-highlighted:bg-${color}/10 hover:not-data-selected:bg-${color}/10`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: {
+        cellTrigger: `data-selected:bg-${color}/10 data-selected:text-${color} data-today:not-data-selected:text-${color} data-highlighted:bg-${color}/20 hover:not-data-selected:bg-${color}/20`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: {
+        cellTrigger: `data-selected:bg-${color}/10 data-selected:text-${color} data-selected:ring data-selected:ring-inset data-selected:ring-${color}/25 data-selected:focus-visible:ring-${color} data-today:not-data-selected:text-${color} data-highlighted:bg-${color}/20 hover:not-data-selected:bg-${color}/20`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        cellTrigger: "data-selected:bg-inverted data-selected:text-inverted data-today:not-data-selected:text-highlighted data-highlighted:bg-inverted/20 hover:not-data-selected:bg-inverted/10"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        cellTrigger: "data-selected:ring data-selected:ring-inset data-selected:ring-accented data-selected:text-default data-selected:bg-default data-selected:focus-visible:ring-inverted data-today:not-data-selected:text-highlighted data-highlighted:bg-inverted/10 hover:not-data-selected:bg-inverted/10"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      class: {
+        cellTrigger: "data-selected:bg-elevated data-selected:text-default data-today:not-data-selected:text-highlighted data-highlighted:bg-inverted/20 hover:not-data-selected:bg-inverted/10"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: {
+        cellTrigger: "data-selected:bg-elevated data-selected:text-default data-selected:ring data-selected:ring-inset data-selected:ring-accented data-selected:focus-visible:ring-inverted data-today:not-data-selected:text-highlighted data-highlighted:bg-inverted/20 hover:not-data-selected:bg-inverted/10"
+      }
+    },
+    ...Object.entries(daySizes).map(([size, cellTrigger]) => ({
+      size,
+      view: "day",
+      class: { cellTrigger }
+    })),
+    ...Object.entries(pickerSizes).map(([size, cellTrigger]) => ({
+      size,
+      view: ["month", "year"],
+      class: { cellTrigger }
+    })),
+    {
+      view: "day",
+      weekNumbers: true,
+      class: {
         gridRow: "grid-cols-8",
         gridWeekDaysRow: "grid-cols-8 [&>*:first-child]:col-start-2"
       }
     }
-  },
-  compoundVariants: [...(options.theme.colors || []).map((color) => ({
-    color,
-    variant: "solid",
-    class: {
-      cellTrigger: `data-[selected]:bg-${color} data-[selected]:text-inverted data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
-    }
-  })), ...(options.theme.colors || []).map((color) => ({
-    color,
-    variant: "outline",
-    class: {
-      cellTrigger: `data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/50 data-[selected]:text-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/10 hover:not-data-[selected]:bg-${color}/10`
-    }
-  })), ...(options.theme.colors || []).map((color) => ({
-    color,
-    variant: "soft",
-    class: {
-      cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
-    }
-  })), ...(options.theme.colors || []).map((color) => ({
-    color,
-    variant: "subtle",
-    class: {
-      cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/25 data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
-    }
-  })), {
-    color: "neutral",
-    variant: "solid",
-    class: {
-      cellTrigger: "data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
-    }
-  }, {
-    color: "neutral",
-    variant: "outline",
-    class: {
-      cellTrigger: "data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-[selected]:text-default data-[selected]:bg-default data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/10 hover:not-data-[selected]:bg-inverted/10"
-    }
-  }, {
-    color: "neutral",
-    variant: "soft",
-    class: {
-      cellTrigger: "data-[selected]:bg-elevated data-[selected]:text-default data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
-    }
-  }, {
-    color: "neutral",
-    variant: "subtle",
-    class: {
-      cellTrigger: "data-[selected]:bg-elevated data-[selected]:text-default data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
-    }
-  }],
+  ],
   defaultVariants: {
     size: "md",
     color: "primary",
-    variant: "solid"
+    variant: "solid",
+    view: "day"
   }
 });
 
@@ -1192,7 +1275,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 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", options.theme.transitions && "transition"]
+    dot: ["cursor-pointer size-3 bg-accented rounded-full outline-inverted/25 focus-visible:outline-3", options.theme.transitions && "transition"]
   },
   variants: {
     orientation: {
@@ -1248,7 +1331,7 @@ const changelogVersion = (options) => ({
     },
     to: {
       true: {
-        title: ["has-focus-visible:ring-2 has-focus-visible:ring-primary rounded-xs", options.theme.transitions && "transition"],
+        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"
       }
     },
@@ -1350,6 +1433,7 @@ const chatMessage = (options) => ({
     variant: "naked",
     side: "left",
     class: {
+      body: "w-full",
       content: "w-full"
     }
   }, ...(options.theme.colors || []).map((color) => ({
@@ -1417,7 +1501,7 @@ const chatMessage = (options) => ({
 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 [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]",
+    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]",
     autoScroll: "rounded-full absolute right-1/2 translate-x-1/2 bottom-0"
   },
@@ -1438,15 +1522,20 @@ const chatPalette = {
   }
 };
 
-const chatPrompt = {
+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",
     header: "flex items-center gap-1.5",
-    body: "items-start",
+    body: "items-start gap-1.5",
     footer: "flex items-center justify-between gap-1.5",
-    base: ""
+    base: "px-0"
   },
   variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
     variant: {
       outline: {
         root: "bg-default/75 ring ring-default"
@@ -1462,10 +1551,28 @@ const chatPrompt = {
       }
     }
   },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: ["outline", "subtle"],
+    class: { root: `outline-${color}/25 ${focusHighlight(`outline-3 ring-${color}`)}` }
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "soft",
+    class: { root: `outline-${color}/25 ${focusHighlight("outline-3")}` }
+  })), {
+    color: "neutral",
+    variant: ["outline", "subtle"],
+    class: { root: `outline-inverted/25 ${focusHighlight("outline-3 ring-inverted")}` }
+  }, {
+    color: "neutral",
+    variant: "soft",
+    class: { root: `outline-inverted/25 ${focusHighlight("outline-3")}` }
+  }],
   defaultVariants: {
+    color: "primary",
     variant: "outline"
   }
-};
+});
 
 const chatPromptSubmit = {
   slots: {
@@ -1476,14 +1583,14 @@ const chatPromptSubmit = {
 const chatReasoning = (options) => ({
   slots: {
     root: "",
-    trigger: ["group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary min-w-0", options.theme.transitions && "transition-colors"],
+    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",
     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] overflow-hidden",
-    body: "max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap"
+    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",
+    body: "max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap focus:outline-none"
   },
   variants: {
     chevron: {
@@ -1502,38 +1609,40 @@ const chatReasoning = (options) => ({
 });
 
 const chatShimmer = {
-  base: "text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]"
+  base: "text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted"
 };
 
 const chatTool = (options) => ({
   slots: {
     root: "",
-    trigger: ["group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary min-w-0", options.theme.transitions && "transition-colors"],
+    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",
     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] overflow-hidden",
-    body: "text-sm text-dimmed whitespace-pre-wrap"
+    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden",
+    body: "text-sm text-dimmed whitespace-pre-wrap",
+    actions: "flex items-center justify-end gap-1.5"
   },
   variants: {
     variant: {
       inline: {
-        body: "pt-2"
+        trigger: "rounded-sm outline-primary/25 focus-visible:outline-3",
+        body: "pt-2",
+        actions: "pt-2"
       },
       card: {
-        root: "rounded-md ring ring-default overflow-hidden",
-        trigger: "px-2 py-1",
+        root: "rounded-md ring ring-default overflow-hidden outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary",
+        trigger: "px-2 py-1 focus:outline-none",
         trailingIcon: "ms-auto",
-        body: "border-t border-default p-2 max-h-[200px] overflow-y-auto"
+        body: "border-t border-default p-2 max-h-[200px] overflow-y-auto focus:outline-none",
+        actions: "border-t border-default p-2"
       }
     },
     chevron: {
-      leading: {
-        leadingIcon: "group-hover:opacity-0"
-      },
+      leading: "",
       trailing: ""
     },
     loading: {
@@ -1543,7 +1652,7 @@ const chatTool = (options) => ({
     },
     alone: {
       false: {
-        leadingIcon: ["absolute inset-0 group-data-[state=open]:opacity-0", options.theme.transitions && "transition-opacity duration-200"],
+        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"]
       }
     }
@@ -1554,7 +1663,7 @@ 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-2 focus-visible:outline-offset-2",
+    base: "rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3",
     indicator: "flex items-center justify-center size-full text-inverted",
     icon: "shrink-0 size-full",
     wrapper: "w-full",
@@ -1564,11 +1673,11 @@ const checkbox = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `focus-visible:outline-${color}`,
+        base: `outline-${color}/25 focus-visible:ring-${color}`,
         indicator: `bg-${color}`
       }])),
       neutral: {
-        base: "focus-visible:outline-inverted",
+        base: "outline-inverted/25 focus-visible:ring-inverted",
         indicator: "bg-inverted"
       }
     },
@@ -1861,7 +1970,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] overflow-hidden"
+    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden"
   }
 };
 
@@ -2314,11 +2423,14 @@ const drawer = (options) => ({
     content: "fixed bg-default ring ring-default flex focus:outline-none",
     handle: ["shrink-0 !bg-accented", options.theme.transitions && "transition-opacity"],
     container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
-    header: "",
+    header: "flex items-center gap-1.5 min-h-8",
+    wrapper: "min-w-0 flex-1",
     title: "text-highlighted font-semibold",
     description: "mt-1 text-muted text-sm",
+    actions: "flex items-center gap-1.5 shrink-0 ms-auto",
     body: "flex-1",
-    footer: "flex flex-col gap-1.5"
+    footer: "flex flex-col gap-1.5",
+    close: ""
   },
   variants: {
     direction: {
@@ -2774,6 +2886,11 @@ const empty = {
       naked: {
         description: "text-muted"
       }
+    },
+    loading: {
+      true: {
+        avatar: "[&>[data-slot=icon]]:animate-spin"
+      }
     }
   },
   defaultVariants: {
@@ -2797,7 +2914,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-2", 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]"],
     wrapper: "flex flex-col items-center justify-center text-center",
     icon: "shrink-0",
     avatar: "shrink-0",
@@ -2889,14 +3006,14 @@ const fileUpload = (options) => ({
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
-    class: `focus-visible:outline-${color}`
+    class: `outline-${color}/25 focus-visible:outline-3 focus-visible:border-${color}`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
     class: `border-${color}`
   })), {
     color: "neutral",
-    class: "focus-visible:outline-inverted"
+    class: "outline-inverted/25 focus-visible:outline-3 focus-visible:border-inverted"
   }, {
     color: "neutral",
     highlight: true,
@@ -3007,7 +3124,7 @@ const footerColumns = (options) => ({
     label: "text-sm font-semibold",
     list: "mt-6 space-y-4",
     item: "relative",
-    link: "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    link: "group text-sm flex items-center gap-1.5 rounded-sm outline-primary/25 focus-visible:outline-3",
     linkLeadingIcon: "size-5 shrink-0",
     linkLabel: "truncate",
     linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed inline-block"
@@ -3096,7 +3213,7 @@ const header = {
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
-    base: ["w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     leading: "absolute inset-y-0 start-0 flex items-center",
     leadingIcon: "shrink-0 text-dimmed",
     leadingAvatar: "shrink-0",
@@ -3153,7 +3270,7 @@ const input = (options) => ({
       soft: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
       subtle: "text-highlighted bg-elevated ring ring-inset ring-accented",
       ghost: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-highlighted bg-transparent"
+      none: "text-highlighted bg-transparent focus:outline-none"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -3181,7 +3298,11 @@ const input = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
-    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    class: `outline-${color}/25 focus-visible:outline-3 focus-visible:ring-${color}`
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: ["soft", "ghost"],
+    class: `outline-${color}/25 focus-visible:outline-3`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
@@ -3189,7 +3310,11 @@ const input = (options) => ({
   })), {
     color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
+    class: "outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"
+  }, {
+    color: "neutral",
+    variant: ["soft", "ghost"],
+    class: "outline-inverted/25 focus-visible:outline-3"
   }, {
     color: "neutral",
     highlight: true,
@@ -3302,9 +3427,15 @@ const inputDate = (options) => {
           base: (prev) => [prev, "gap-0.75"],
           segment: "data-[segment=day]:w-10 data-[segment=month]:w-10 data-[segment=year]:w-12"
         }
-      }
+      },
+      variant: (prev) => Object.fromEntries(
+        Object.entries(prev).map(([key, value]) => [key, replaceFocus$2(value)])
+      )
     },
-    compoundVariants: [{
+    compoundVariants: (prev) => [...prev.map((item) => ({
+      ...item,
+      class: typeof item.class === "string" ? replaceFocus$2(item.class) : item.class
+    })), {
       variant: "outline",
       class: {
         segment: "focus:bg-elevated"
@@ -3332,6 +3463,9 @@ const inputDate = (options) => {
     }]
   }, input(options));
 };
+function replaceFocus$2(str) {
+  return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
+}
 
 const inputMenu = (options) => {
   return defuFn({
@@ -3377,7 +3511,7 @@ const inputMenu = (options) => {
           root: "flex-wrap"
         },
         false: {
-          base: "w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          base: "w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75"
         }
       },
       size: {
@@ -3446,21 +3580,21 @@ const inputMenu = (options) => {
     compoundVariants: [{
       variant: "soft",
       multiple: true,
-      class: "has-focus:bg-elevated"
+      class: "has-focus:bg-elevated has-focus-visible:outline-3"
     }, {
       variant: "ghost",
       multiple: true,
-      class: "has-focus:bg-elevated"
+      class: "has-focus:bg-elevated has-focus-visible:outline-3"
     }, ...(options.theme.colors || []).map((color) => ({
       color,
       multiple: true,
       variant: ["outline", "subtle"],
-      class: `has-focus-visible:ring-2 has-focus-visible:ring-${color}`
+      class: `has-focus-visible:outline-3 has-focus-visible:ring-${color}`
     })), {
       color: "neutral",
       multiple: true,
       variant: ["outline", "subtle"],
-      class: "has-focus-visible:ring-2 has-focus-visible:ring-inverted"
+      class: "has-focus-visible:outline-3 has-focus-visible:ring-inverted"
     }]
   }, input(options));
 };
@@ -3470,7 +3604,7 @@ const inputNumber = (options) => {
   return {
     slots: {
       root: "relative inline-flex items-center",
-      base: ["w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+      base: ["w-full rounded-md border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
       increment: "absolute flex items-center",
       decrement: "absolute flex items-center"
     },
@@ -3523,7 +3657,11 @@ const inputNumber = (options) => {
     compoundVariants: [...(options.theme.colors || []).map((color) => ({
       color,
       variant: ["outline", "subtle"],
-      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+      class: `outline-${color}/25 focus-visible:outline-3 focus-visible:ring-${color}`
+    })), ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: ["soft", "ghost"],
+      class: `outline-${color}/25 focus-visible:outline-3`
     })), ...(options.theme.colors || []).map((color) => ({
       color,
       highlight: true,
@@ -3531,7 +3669,11 @@ const inputNumber = (options) => {
     })), {
       color: "neutral",
       variant: ["outline", "subtle"],
-      class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
+      class: "outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"
+    }, {
+      color: "neutral",
+      variant: ["soft", "ghost"],
+      class: "outline-inverted/25 focus-visible:outline-3"
     }, {
       color: "neutral",
       highlight: true,
@@ -3641,16 +3783,16 @@ const inputTags = (options) => {
         }
       },
       variant: (prev) => Object.fromEntries(
-        Object.entries(prev).map(([key, value]) => [key, replaceFocus$2(value)])
+        Object.entries(prev).map(([key, value]) => [key, replaceFocus$1(value)])
       )
     },
     compoundVariants: (prev) => prev.map((item) => ({
       ...item,
-      class: typeof item.class === "string" ? replaceFocus$2(item.class) : item.class
+      class: typeof item.class === "string" ? replaceFocus$1(item.class) : item.class
     }))
   }, input(options));
 };
-function replaceFocus$2(str) {
+function replaceFocus$1(str) {
   return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
 }
 
@@ -3685,9 +3827,15 @@ const inputTime = (options) => {
           base: (prev) => [prev, "gap-0.75"],
           segment: "not-data-[segment=literal]:w-10"
         }
-      }
+      },
+      variant: (prev) => Object.fromEntries(
+        Object.entries(prev).map(([key, value]) => [key, replaceFocus(value)])
+      )
     },
-    compoundVariants: [{
+    compoundVariants: (prev) => [...prev.map((item) => ({
+      ...item,
+      class: typeof item.class === "string" ? replaceFocus(item.class) : item.class
+    })), {
       variant: "outline",
       class: {
         segment: "focus:bg-elevated"
@@ -3715,6 +3863,9 @@ const inputTime = (options) => {
     }]
   }, input(options));
 };
+function replaceFocus(str) {
+  return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
+}
 
 const kbd$1 = (options) => ({
   base: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase",
@@ -3776,7 +3927,7 @@ const kbd$1 = (options) => ({
 });
 
 const link = (options) => ({
-  base: "focus-visible:outline-primary",
+  base: "outline-primary/25 focus-visible:outline-3 rounded-md",
   variants: {
     active: {
       true: "text-primary",
@@ -3881,8 +4032,12 @@ const listbox = (options) => ({
       }
     },
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      neutral: ""
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        root: `outline-${color}/25 has-focus-visible:outline-3 has-focus-visible:ring-${color}`
+      }])),
+      neutral: {
+        root: "outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted"
+      }
     },
     virtualize: {
       true: {
@@ -3915,6 +4070,7 @@ const listbox = (options) => ({
     }
   }],
   defaultVariants: {
+    color: "primary",
     size: "md"
   }
 });
@@ -3957,7 +4113,7 @@ const marquee = {
     orientation: "horizontal",
     class: {
       root: "flex-row",
-      content: "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
+      content: "flex-row motion-safe:animate-[marquee_var(--duration)_linear_infinite] motion-safe:rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
     }
   }, {
     orientation: "horizontal",
@@ -3969,7 +4125,7 @@ const marquee = {
     orientation: "vertical",
     class: {
       root: "flex-col",
-      content: "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] 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] motion-safe:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
     }
   }, {
     orientation: "vertical",
@@ -4044,7 +4200,7 @@ const navigationMenu = (options) => ({
     list: "isolate min-w-0",
     label: "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5",
     item: "min-w-0",
-    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:outline-3",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
@@ -4058,14 +4214,14 @@ const navigationMenu = (options) => ({
     childList: "isolate",
     childLabel: "text-xs text-highlighted",
     childItem: "",
-    childLink: "group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    childLink: "group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:outline-3",
     childLinkWrapper: "min-w-0",
     childLinkIcon: "size-5 shrink-0",
     childLinkLabel: "truncate",
     childLinkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
     childLinkDescription: "text-muted",
     separator: "px-2 h-px bg-border",
-    viewportWrapper: "absolute top-full left-0 flex w-full",
+    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",
     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",
@@ -4074,12 +4230,12 @@ const navigationMenu = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        link: `focus-visible:before:ring-${color}`,
-        childLink: `focus-visible:before:ring-${color}`
+        link: `before:outline-${color}/25`,
+        childLink: `before:outline-${color}/25`
       }])),
       neutral: {
-        link: "focus-visible:before:ring-inverted",
-        childLink: "focus-visible:before:ring-inverted"
+        link: "before:outline-inverted/25",
+        childLink: "before:outline-inverted/25"
       }
     },
     highlightColor: {
@@ -4099,7 +4255,7 @@ const navigationMenu = (options) => ({
         childList: "grid p-2",
         childLink: "px-3 py-2 gap-2 before:inset-x-px before:inset-y-0",
         childLinkLabel: "font-medium",
-        content: "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto"
+        content: "absolute top-0 start-0 w-full max-h-[70vh] overflow-y-auto"
       },
       vertical: {
         root: "flex-col",
@@ -4163,7 +4319,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] overflow-hidden"
+      content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=closed]:overflow-hidden"
     }
   }, {
     orientation: "vertical",
@@ -4344,7 +4500,7 @@ const pageAnchors = (options) => ({
     root: "",
     list: "",
     item: "relative",
-    link: "group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary",
+    link: "group text-sm flex items-center gap-1.5 py-1 rounded-sm outline-primary/25 focus-visible:outline-3",
     linkLeading: "rounded-md p-1 inline-flex ring-inset ring",
     linkLeadingIcon: "size-4 shrink-0",
     linkLabel: "truncate",
@@ -4498,7 +4654,7 @@ const pageCard = (options) => ({
     },
     to: {
       true: {
-        root: ["has-focus-visible:ring-2 has-focus-visible:ring-primary", options.theme.transitions && "transition"]
+        root: ["outline-primary/25 has-[>a:focus-visible]:outline-3", options.theme.transitions && "transition"]
       }
     },
     title: {
@@ -4556,6 +4712,13 @@ const pageCard = (options) => ({
     class: {
       root: "hover:ring-accented"
     }
+  }, {
+    variant: ["outline", "subtle"],
+    to: true,
+    highlight: false,
+    class: {
+      root: "has-[>a:focus-visible]:ring-primary"
+    }
   }, {
     variant: "ghost",
     to: true,
@@ -4619,7 +4782,7 @@ const pageFeature = (options) => ({
     },
     to: {
       true: {
-        root: ["has-focus-visible:ring-2 has-focus-visible:ring-primary", options.theme.transitions && "transition"]
+        root: ["outline-primary/25 has-focus-visible:outline-3", options.theme.transitions && "transition"]
       }
     },
     title: {
@@ -4704,7 +4867,7 @@ const pageLinks = (options) => ({
     title: "text-sm font-semibold flex items-center gap-1.5",
     list: "flex flex-col gap-2",
     item: "relative",
-    link: "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    link: "group text-sm flex items-center gap-1.5 rounded-sm outline-primary/25 focus-visible:outline-3",
     linkLeadingIcon: "size-5 shrink-0",
     linkLabel: "truncate",
     linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed"
@@ -4839,7 +5002,8 @@ const pagination = {
 const pinInput = (options) => ({
   slots: {
     root: "relative inline-flex items-center gap-1.5",
-    base: ["rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
+    base: ["rounded-md border-0 placeholder:text-dimmed text-center disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    separator: "text-dimmed flex items-center justify-center"
   },
   variants: {
     size: {
@@ -4864,7 +5028,7 @@ const pinInput = (options) => ({
       soft: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
       subtle: "text-highlighted bg-elevated ring ring-inset ring-accented",
       ghost: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-highlighted bg-transparent"
+      none: "text-highlighted bg-transparent focus:outline-none"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -4880,7 +5044,11 @@ const pinInput = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
-    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    class: `outline-${color}/25 focus-visible:outline-3 focus-visible:ring-${color}`
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: ["soft", "ghost"],
+    class: `outline-${color}/25 focus-visible:outline-3`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
@@ -4888,7 +5056,11 @@ const pinInput = (options) => ({
   })), {
     color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
+    class: "outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"
+  }, {
+    color: "neutral",
+    variant: ["soft", "ghost"],
+    class: "outline-inverted/25 focus-visible:outline-3"
   }, {
     color: "neutral",
     highlight: true,
@@ -4952,7 +5124,7 @@ const pricingPlan = {
     orientation: {
       horizontal: {
         root: "grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default",
-        body: "lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center",
+        body: "lg:col-span-2 pb-6 lg:pb-0 lg:pe-6 justify-center",
         footer: "lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto",
         features: "lg:grid lg:grid-cols-2 lg:mt-12"
       },
@@ -5042,9 +5214,9 @@ const pricingTable = {
     thead: "",
     tbody: "",
     tr: "",
-    th: "py-4 font-normal text-left rtl:text-right border-b border-default",
+    th: "py-4 font-normal text-start border-b border-default",
     td: "px-6 py-4 text-center border-b border-default",
-    tier: "p-6 text-left rtl:text-right font-normal align-top h-full",
+    tier: "p-6 text-start font-normal align-top h-full",
     tierWrapper: "flex flex-col md:h-full",
     tierTitleWrapper: "flex items-center gap-3",
     tierTitle: "text-lg font-semibold text-highlighted",
@@ -5089,7 +5261,7 @@ 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",
+    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",
     steps: "grid items-end",
     step: "truncate text-end row-start-1 col-start-1 transition-opacity"
@@ -5247,49 +5419,49 @@ const progress = (options) => ({
     orientation: "horizontal",
     animation: "carousel",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"
+      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]"
     }
   }, {
     orientation: "vertical",
     animation: "carousel",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
     }
   }, {
     orientation: "horizontal",
     animation: "carousel-inverse",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
+      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]"
     }
   }, {
     orientation: "vertical",
     animation: "carousel-inverse",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
     }
   }, {
     orientation: "horizontal",
     animation: "swing",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
     }
   }, {
     orientation: "vertical",
     animation: "swing",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
     }
   }, {
     orientation: "horizontal",
     animation: "elastic",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
     }
   }, {
     orientation: "vertical",
     animation: "elastic",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
+      indicator: "motion-safe:data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
     }
   }],
   defaultVariants: {
@@ -5306,7 +5478,7 @@ 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-2 focus-visible:outline-offset-2",
+    base: "rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3",
     indicator: "flex items-center justify-center size-full after:bg-default after:rounded-full",
     wrapper: "w-full",
     label: "block font-medium text-default",
@@ -5315,11 +5487,11 @@ const radioGroup = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `focus-visible:outline-${color}`,
+        base: `outline-${color}/25 focus-visible:ring-${color}`,
         indicator: `bg-${color}`
       }])),
       neutral: {
-        base: "focus-visible:outline-inverted",
+        base: "outline-inverted/25 focus-visible:ring-inverted",
         indicator: "bg-inverted"
       }
     },
@@ -5497,7 +5669,7 @@ const radioGroup = (options) => ({
 
 const scrollArea = {
   slots: {
-    root: "relative",
+    root: "relative outline-primary/25 focus-visible:outline-3",
     viewport: "relative flex",
     item: ""
   },
@@ -5513,6 +5685,11 @@ const scrollArea = {
         viewport: "flex-row",
         item: ""
       }
+    },
+    externalScroll: {
+      true: {
+        root: "overflow-visible"
+      }
     }
   }
 };
@@ -5521,7 +5698,7 @@ const select = (options) => {
   return defuFn({
     slots: {
       root: () => void 0,
-      base: () => ["relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+      base: () => ["relative group rounded-md inline-flex items-center disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
       value: "truncate pointer-events-none",
       placeholder: "truncate text-dimmed",
       arrow: "fill-bg stroke-default",
@@ -5614,20 +5791,16 @@ const select = (options) => {
         "item-aligned": {
           content: ""
         }
+      },
+      multiple: {
+        true: ""
       }
     },
-    compoundVariants: (prev) => prev.map((item) => ({
-      ...item,
-      class: typeof item.class === "string" ? replaceFocus$1(item.class) : item.class
-    })),
     defaultVariants: {
       position: "popper"
     }
   }, input(options));
 };
-function replaceFocus$1(str) {
-  return str.replace(/focus-visible:/g, "focus:");
-}
 
 const selectMenu = (options) => {
   return defuFn({
@@ -5647,16 +5820,9 @@ const selectMenu = (options) => {
           viewport: "divide-y divide-default"
         }
       }
-    },
-    compoundVariants: (prev) => prev.map((item) => ({
-      ...item,
-      class: typeof item.class === "string" ? replaceFocus(item.class) : item.class
-    }))
+    }
   }, select(options));
 };
-function replaceFocus(str) {
-  return str.replace(/focus:/g, "focus-visible:");
-}
 
 const separator = (options) => ({
   slots: {
@@ -5784,8 +5950,8 @@ const separator = (options) => ({
 const sidebar = (options) => ({
   slots: {
     root: "peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem]",
-    gap: "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-    container: "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex",
+    gap: "relative w-(--sidebar-width) bg-transparent",
+    container: "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) lg:flex",
     inner: "flex size-full flex-col overflow-hidden divide-y divide-default",
     header: "flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)",
     wrapper: "min-w-0 flex-1",
@@ -5795,17 +5961,24 @@ const sidebar = (options) => ({
     close: "",
     body: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
     footer: "flex items-center gap-1.5 overflow-hidden p-4",
-    rail: ["absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented)", options.theme.transitions && "after:transition-colors"]
+    rail: ["absolute inset-y-0 z-20 hidden w-4 after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented)", options.theme.transitions && "after:transition-colors"]
   },
   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"
+      }
+    },
     side: {
       left: {
-        container: "left-0 border-e border-default",
-        rail: "end-0 translate-x-1/2"
+        container: "start-0 border-e border-default",
+        rail: "end-0 translate-x-1/2 rtl:-translate-x-1/2"
       },
       right: {
-        container: "right-0 border-s border-default",
-        rail: "-start-px -translate-x-1/2"
+        container: "end-0 border-s border-default",
+        rail: "-start-px -translate-x-1/2 rtl:translate-x-1/2"
       }
     },
     collapsible: {
@@ -5842,13 +6015,13 @@ const sidebar = (options) => ({
     side: "left",
     collapsible: ["offcanvas", "icon"],
     class: {
-      rail: "cursor-w-resize data-[state=collapsed]:cursor-e-resize"
+      rail: "cursor-w-resize rtl:cursor-e-resize data-[state=collapsed]:cursor-e-resize data-[state=collapsed]:rtl:cursor-w-resize"
     }
   }, {
     side: "right",
     collapsible: ["offcanvas", "icon"],
     class: {
-      rail: "cursor-e-resize data-[state=collapsed]:cursor-w-resize"
+      rail: "cursor-e-resize rtl:cursor-w-resize data-[state=collapsed]:cursor-w-resize data-[state=collapsed]:rtl:cursor-e-resize"
     }
   }, {
     side: "left",
@@ -5866,13 +6039,13 @@ const sidebar = (options) => ({
     side: "left",
     collapsible: "offcanvas",
     class: {
-      container: "data-[state=collapsed]:-left-(--sidebar-width)"
+      container: "data-[state=collapsed]:-start-(--sidebar-width)"
     }
   }, {
     side: "right",
     collapsible: "offcanvas",
     class: {
-      container: "data-[state=collapsed]:-right-(--sidebar-width)"
+      container: "data-[state=collapsed]:-end-(--sidebar-width)"
     }
   }, {
     variant: "floating",
@@ -6030,17 +6203,17 @@ const slider = (options) => ({
     root: "relative flex items-center select-none touch-none",
     track: "relative bg-accented overflow-hidden rounded-full grow",
     range: "absolute rounded-full",
-    thumb: "rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
+    thumb: "rounded-full bg-default ring-2 focus-visible:outline-3 focus-visible:outline-offset-2"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         range: `bg-${color}`,
-        thumb: `ring-${color} focus-visible:outline-${color}/50`
+        thumb: `ring-${color} outline-${color}/25`
       }])),
       neutral: {
         range: "bg-inverted",
-        thumb: "ring-inverted focus-visible:outline-inverted/50"
+        thumb: "ring-inverted outline-inverted/25"
       }
     },
     size: {
@@ -6143,13 +6316,90 @@ const slider = (options) => ({
   }
 });
 
+const inputRating = (options) => ({
+  slots: {
+    root: "",
+    item: ["relative inline-block cursor-pointer select-none rounded-sm has-focus-visible:outline-3", options.theme.transitions && "transition"],
+    indicator: "absolute inset-0 overflow-hidden outline-none text-transparent w-(--reka-rating-item-step-width) opacity-(--reka-rating-item-step-opacity) z-(--reka-rating-item-step-z-index)",
+    icon: "block",
+    emptyIcon: "block w-full h-full text-muted pointer-events-none"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "inline-flex items-center gap-0.5"
+      },
+      vertical: {
+        root: "inline-flex flex-col items-center gap-0.5"
+      }
+    },
+    size: {
+      xs: {
+        item: "size-3",
+        icon: "size-3"
+      },
+      sm: {
+        item: "size-4",
+        icon: "size-4"
+      },
+      md: {
+        item: "size-5",
+        icon: "size-5"
+      },
+      lg: {
+        item: "size-6",
+        icon: "size-6"
+      },
+      xl: {
+        item: "size-7",
+        icon: "size-7"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        indicator: `data-[state=active]:text-${color}`,
+        item: `outline-${color}/25`
+      }])),
+      neutral: {
+        indicator: "data-[state=active]:text-highlighted",
+        item: "outline-inverted/25"
+      }
+    },
+    readonly: {
+      true: {
+        root: "cursor-default",
+        item: "cursor-default"
+      },
+      false: {}
+    },
+    disabled: {
+      true: {
+        root: "opacity-75 cursor-not-allowed",
+        item: "cursor-not-allowed pointer-events-none"
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [{
+    readonly: false,
+    disabled: false,
+    class: {
+      item: "hover:scale-110"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});
+
 const stepper = (options) => ({
   slots: {
     root: "flex gap-4",
     header: "flex",
     item: "group text-center relative w-full",
     container: "relative",
-    trigger: "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2",
+    trigger: "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-3",
     indicator: "flex items-center justify-center size-full",
     icon: "shrink-0",
     separator: "absolute rounded-full group-data-[disabled]:opacity-75 bg-accented",
@@ -6211,11 +6461,11 @@ const stepper = (options) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        trigger: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color} focus-visible:outline-${color}`,
+        trigger: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color} outline-${color}/25`,
         separator: `group-data-[state=completed]:bg-${color}`
       }])),
       neutral: {
-        trigger: `group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted`,
+        trigger: `group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted outline-inverted/25`,
         separator: `group-data-[state=completed]:bg-inverted`
       }
     }
@@ -6270,7 +6520,7 @@ 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-2 focus-visible:outline-offset-2 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"],
     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"],
@@ -6281,11 +6531,11 @@ const _switch = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `data-[state=checked]:bg-${color} focus-visible:outline-${color}`,
+        base: `data-[state=checked]:bg-${color} outline-${color}/25`,
         icon: `group-data-[state=checked]:text-${color}`
       }])),
       neutral: {
-        base: "data-[state=checked]:bg-inverted focus-visible:outline-inverted",
+        base: "data-[state=checked]:bg-inverted outline-inverted/25",
         icon: "group-data-[state=checked]:text-highlighted"
       }
     },
@@ -6377,16 +6627,16 @@ const _switch = (options) => ({
 
 const table$1 = (options) => ({
   slots: {
-    root: "relative overflow-auto",
+    root: "relative overflow-auto outline-primary/25 focus-visible:outline-3",
     base: "min-w-full overflow-clip",
     caption: "sr-only",
     thead: "relative",
-    tbody: "isolate [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default",
+    tbody: "isolate [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:outline-primary/25 [&>tr]:data-[selectable=true]:focus-visible:outline-3 divide-y divide-default",
     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",
+    th: "px-4 py-3.5 text-sm text-highlighted text-start 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 start-0 w-full h-px bg-(--ui-border-accented)",
     empty: "py-6 text-center text-sm text-muted",
     loading: "py-6 text-center"
   },
@@ -6411,7 +6661,12 @@ const table$1 = (options) => ({
     },
     loading: {
       true: {
-        thead: "after:absolute after:z-1 after:h-px"
+        thead: "after:absolute after:z-1 after:h-px motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse"
+      }
+    },
+    externalScroll: {
+      true: {
+        root: "overflow-visible"
       }
     },
     loadingAnimation: {
@@ -6441,25 +6696,25 @@ const table$1 = (options) => ({
     loading: true,
     loadingAnimation: "carousel",
     class: {
-      thead: "after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]"
+      thead: "motion-safe:after:animate-[carousel_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]"
     }
   }, {
     loading: true,
     loadingAnimation: "carousel-inverse",
     class: {
-      thead: "after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
+      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]"
     }
   }, {
     loading: true,
     loadingAnimation: "swing",
     class: {
-      thead: "after:animate-[swing_2s_ease-in-out_infinite]"
+      thead: "motion-safe:after:animate-[swing_2s_ease-in-out_infinite]"
     }
   }, {
     loading: true,
     loadingAnimation: "elastic",
     class: {
-      thead: "after:animate-[elastic_2s_ease-in-out_infinite]"
+      thead: "motion-safe:after:animate-[elastic_2s_ease-in-out_infinite]"
     }
   }],
   defaultVariants: {
@@ -6468,6 +6723,7 @@ const table$1 = (options) => ({
   }
 });
 
+const ssr = (...classes) => classes.map((c) => `in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:${c}`).join(" ");
 const tabs$1 = (options) => ({
   slots: {
     root: "flex items-center gap-2",
@@ -6480,23 +6736,27 @@ const tabs$1 = (options) => ({
     label: "truncate",
     trailingBadge: "shrink-0",
     trailingBadgeSize: "sm",
-    content: "focus:outline-none w-full"
+    content: "w-full rounded-md focus-visible:outline-3"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      neutral: ""
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        content: `outline-${color}/25`
+      }])),
+      neutral: {
+        content: "outline-inverted/25"
+      }
     },
     variant: {
       pill: {
         list: "bg-elevated rounded-lg",
-        trigger: "grow",
+        trigger: [`grow`, ssr("before:content-['']", "before:absolute", "before:inset-0", "before:rounded-md", "before:shadow-xs", "before:-z-10", "isolate")],
         indicator: "rounded-md shadow-xs"
       },
       link: {
         list: "border-default",
         indicator: "rounded-full",
-        trigger: "focus:outline-none"
+        trigger: ssr("after:content-['']", "after:absolute", "after:rounded-full")
       }
     },
     orientation: {
@@ -6550,49 +6810,52 @@ const tabs$1 = (options) => ({
     variant: "link",
     class: {
       list: "border-b -mb-px",
-      indicator: "-bottom-px h-px"
+      indicator: "-bottom-px h-px",
+      trigger: ssr("after:inset-x-0", "after:-bottom-[calc(var(--spacing)+1px)]", "after:h-px")
     }
   }, {
     orientation: "vertical",
     variant: "pill",
     class: {
       indicator: "inset-x-1",
-      list: "items-center"
+      list: "items-center",
+      trigger: "w-full justify-center"
     }
   }, {
     orientation: "vertical",
     variant: "link",
     class: {
       list: "border-s -ms-px",
-      indicator: "-start-px w-px"
+      indicator: "-start-px w-px",
+      trigger: ssr("after:inset-y-0", "after:-start-[calc(var(--spacing)+1px)]", "after:w-px")
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "pill",
     class: {
       indicator: `bg-${color}`,
-      trigger: `data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
+      trigger: [`data-[state=active]:text-inverted outline-${color}/25 focus-visible:outline-3`, ssr(`before:bg-${color}`)]
     }
   })), {
     color: "neutral",
     variant: "pill",
     class: {
       indicator: "bg-inverted",
-      trigger: "data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+      trigger: [`data-[state=active]:text-inverted outline-inverted/25 focus-visible:outline-3`, ssr("before:bg-inverted")]
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     class: {
       indicator: `bg-${color}`,
-      trigger: `data-[state=active]:text-${color} focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+      trigger: [`data-[state=active]:text-${color} outline-${color}/25 focus-visible:outline-3`, ssr(`after:bg-${color}`)]
     }
   })), {
     color: "neutral",
     variant: "link",
     class: {
       indicator: "bg-inverted",
-      trigger: "data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
+      trigger: [`data-[state=active]:text-highlighted outline-inverted/25 focus-visible:outline-3`, ssr("after:bg-inverted")]
     }
   }],
   defaultVariants: {
@@ -6829,7 +7092,7 @@ const timeline = (options) => ({
 
 const toast = (options) => ({
   slots: {
-    root: "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",
+    root: "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5",
     wrapper: "w-0 flex-1 flex flex-col",
     title: "text-sm font-medium text-highlighted",
     description: "text-sm text-muted",
@@ -6843,11 +7106,11 @@ const toast = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`,
+        root: `outline-${color}/25 focus-visible:outline-3 focus-visible:ring-${color}`,
         icon: `text-${color}`
       }])),
       neutral: {
-        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted",
+        root: "outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted",
         icon: "text-highlighted"
       }
     },
@@ -6945,7 +7208,7 @@ const tree = (options) => ({
     item: "w-full",
     listWithChildren: "border-s border-default",
     itemWithChildren: "ps-1.5 -ms-px",
-    link: "relative group w-full flex items-center text-sm select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    link: "relative group w-full flex items-center text-sm select-none before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:outline-3",
     linkLeadingIcon: "shrink-0 relative",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
@@ -6959,10 +7222,10 @@ const tree = (options) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        link: `focus-visible:before:ring-${color}`
+        link: `before:outline-${color}/25`
       }])),
       neutral: {
-        link: "focus-visible:before:ring-inverted"
+        link: "before:outline-inverted/25"
       }
     },
     size: {
@@ -7052,6 +7315,7 @@ const user = (options) => ({
     },
     to: {
       true: {
+        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"
@@ -7182,6 +7446,7 @@ const theme = {
   inputDate: inputDate,
   inputMenu: inputMenu,
   inputNumber: inputNumber,
+  inputRating: inputRating,
   inputTags: inputTags,
   inputTime: inputTime,
   kbd: kbd$1,
@@ -7236,7 +7501,7 @@ const theme = {
 };
 
 const a = (options) => ({
-  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"]
+  base: ["text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 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 = {
@@ -7262,12 +7527,12 @@ const callout = (options) => ({
   slots: {
     base: ["group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 *:last:mb-0! [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0", options.theme.transitions && "transition-colors"],
     icon: ["size-4 shrink-0 align-sub me-2 inline-block", options.theme.transitions && "transition-colors"],
-    externalIcon: ["size-4 align-top absolute right-2 top-2 pointer-events-none", options.theme.transitions && "transition-colors"]
+    externalIcon: ["size-4 align-top absolute end-2 top-2 pointer-events-none", options.theme.transitions && "transition-colors"]
   },
   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} [&_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`,
+        base: `border border-${color}/25 bg-${color}/10 text-${color}-600 dark:text-${color}-300 [&_a]:text-${color} [&_a]:hover:border-${color} [&_a]:outline-${color}/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-${color}-600 dark:[&_code]:text-${color}-300 [&_code]:border-${color}/25 [&_a]:[&>code]:outline-${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`
       }])),
@@ -7285,14 +7550,14 @@ const callout = (options) => ({
     color,
     to: true,
     class: {
-      base: `hover:border-${color} has-focus-visible:border-${color}`,
+      base: `hover:border-${color} outline-${color}/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-${color}`,
       externalIcon: `group-hover:text-${color}`
     }
   })), {
     color: "neutral",
     to: true,
     class: {
-      base: "hover:border-inverted has-focus-visible:border-inverted",
+      base: "hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-inverted",
       externalIcon: "group-hover:text-highlighted"
     }
   }],
@@ -7307,7 +7572,7 @@ const card = (options) => ({
     icon: "size-6 mb-2 block",
     title: "text-highlighted font-semibold",
     description: "text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1",
-    externalIcon: ["size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none", options.theme.transitions && "transition-colors"]
+    externalIcon: ["size-4 align-top absolute end-2 top-2 text-dimmed pointer-events-none", options.theme.transitions && "transition-colors"]
   },
   variants: {
     color: {
@@ -7331,14 +7596,14 @@ const card = (options) => ({
     color,
     to: true,
     class: {
-      base: `hover:bg-${color}/10 hover:border-${color} has-focus-visible:border-${color}`,
+      base: `hover:bg-${color}/10 hover:border-${color} outline-${color}/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-${color}`,
       externalIcon: `group-hover:text-${color}`
     }
   })), {
     color: "neutral",
     to: true,
     class: {
-      base: "hover:bg-elevated/50 hover:border-inverted has-focus-visible:border-inverted",
+      base: "hover:bg-elevated/50 hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-inverted",
       externalIcon: "group-hover:text-highlighted"
     }
   }],
@@ -7366,7 +7631,7 @@ const code = (options) => ({
 
 const codeCollapse = {
   slots: {
-    root: "relative [&_pre]:h-[200px] bg-muted",
+    root: "relative my-5 bg-muted [&>div]:my-0 [&_pre]:max-h-[80vh] [&_pre]:pb-12",
     footer: "h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center",
     trigger: "group",
     triggerIcon: "group-data-[state=open]:rotate-180"
@@ -7374,11 +7639,11 @@ const codeCollapse = {
   variants: {
     open: {
       true: {
-        root: "[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12"
+        root: "rounded-md"
       },
       false: {
-        root: "[&_pre]:overflow-hidden",
-        footer: "bg-linear-to-t from-muted"
+        root: "max-h-[200px] overflow-hidden rounded-b-md [&_pre]:overflow-hidden",
+        footer: "inset-x-0 bottom-0 border border-t-0 border-muted bg-linear-to-t from-muted"
       }
     }
   }
@@ -7389,7 +7654,7 @@ const codeGroup = (options) => ({
     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",
-    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 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none", options.theme.transitions && "transition-colors"],
+    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"
   }
@@ -7485,12 +7750,12 @@ const codeTree = (options) => ({
     item: "",
     listWithChildren: "ms-4.5 border-s border-default",
     itemWithChildren: "ps-1.5 -ms-px",
-    link: "relative group peer w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    link: "relative group peer w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none before:outline-primary/25 focus-visible:before:outline-3",
     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",
-    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-l-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto"
+    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: {
     active: {
@@ -7507,7 +7772,7 @@ const codeTree = (options) => ({
 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 focus-visible:ring-2 focus-visible:ring-primary focus:outline-none", options.theme.transitions && "transition-colors"],
+    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",
     triggerLabel: "truncate",
     content: "*:first:mt-2.5 *:last:mb-0 *:my-1.5"
@@ -7543,25 +7808,25 @@ const h1 = {
 
 const h2 = (options) => ({
   slots: {
-    base: ["relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold", options.theme.transitions && "[&>a>code]:transition-colors"],
-    leading: ["absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted", options.theme.transitions && "transition"],
+    base: ["relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold", options.theme.transitions && "[&>a>code]:transition-colors"],
+    leading: ["absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted", options.theme.transitions && "transition"],
     leadingIcon: "size-4 shrink-0",
-    link: "group lg:ps-2 lg:-ms-2"
+    link: "group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2"
   }
 });
 
 const h3 = (options) => ({
   slots: {
-    base: ["relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold", options.theme.transitions && "[&>a>code]:transition-colors"],
-    leading: ["absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted", options.theme.transitions && "transition"],
+    base: ["relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold", options.theme.transitions && "[&>a>code]:transition-colors"],
+    leading: ["absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted", options.theme.transitions && "transition"],
     leadingIcon: "size-4 shrink-0",
-    link: "group lg:ps-2 lg:-ms-2"
+    link: "group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2"
   }
 });
 
 const h4 = {
   slots: {
-    base: "text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary",
+    base: "text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3",
     link: ""
   }
 };
@@ -7621,8 +7886,8 @@ const pre = {
     header: "flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3",
     filename: "text-default text-sm/6",
     icon: "size-4 shrink-0",
-    copy: "absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition",
-    base: "group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap wrap-break-word overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50!"
+    copy: "absolute top-[11px] end-[11px] lg:opacity-0 lg:group-hover:opacity-100 lg:focus-visible:opacity-100 transition",
+    base: "group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap wrap-break-word overflow-x-auto outline-primary/25 focus-visible:outline-3 focus-visible:border-primary **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50!"
   },
   variants: {
     filename: {
@@ -7663,7 +7928,7 @@ const strong = {
 
 const table = {
   slots: {
-    root: "relative my-5 overflow-x-auto",
+    root: "relative my-5 overflow-x-auto rounded-md outline-primary/25 focus-visible:outline-3",
     base: "w-full border-separate border-spacing-0 rounded-md"
   }
 };
@@ -7686,9 +7951,9 @@ const td = {
   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",
+      left: "text-start",
       center: "text-center",
-      right: "text-right"
+      right: "text-end"
     }
   },
   defaultVariants: {
@@ -7700,9 +7965,9 @@ const th = {
   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",
+      left: "text-start",
       center: "text-center",
-      right: "text-right"
+      right: "text-end"
     }
   },
   defaultVariants: {
@@ -7715,7 +7980,7 @@ const thead = {
 };
 
 const tr = {
-  base: "[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md"
+  base: "[&:first-child>th:first-child]:rounded-ss-md [&:first-child>th:last-child]:rounded-se-md [&:last-child>td:first-child]:rounded-es-md [&:last-child>td:last-child]:rounded-ee-md"
 };
 
 const ul = {
@@ -7771,13 +8036,13 @@ 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] overflow-hidden focus:outline-none",
+    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",
     list: "isolate -mx-2.5 -mt-1.5",
     item: "",
     listWithChildren: "ms-5 border-s border-default",
     itemWithChildren: "flex flex-col data-[state=open]:mb-1.5",
     trigger: "font-semibold",
-    link: "group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    link: "group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:outline-3",
     linkLeadingIcon: "shrink-0 size-5",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
     linkTrailingBadge: "shrink-0",
@@ -7789,12 +8054,10 @@ const contentNavigation = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        trigger: `focus-visible:ring-${color}`,
-        link: `focus-visible:before:ring-${color}`
+        link: `before:outline-${color}/25`
       }])),
       neutral: {
-        trigger: "focus-visible:ring-inverted",
-        link: "focus-visible:before:ring-inverted"
+        link: "before:outline-inverted/25"
       }
     },
     highlightColor: {
@@ -7833,7 +8096,7 @@ const contentNavigation = (options) => ({
     highlight: true,
     level: true,
     class: {
-      link: ["after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
+      link: ["after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
     }
   }, {
     disabled: false,
@@ -7965,7 +8228,7 @@ const contentSearchButton = {
 const contentSurround = (options) => ({
   slots: {
     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 focus-visible:outline-primary", options.theme.transitions && "transition-colors"],
+    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]"],
     linkTitle: "font-medium text-[15px] text-highlighted mb-1 truncate",
@@ -7974,11 +8237,11 @@ const contentSurround = (options) => ({
   variants: {
     direction: {
       left: {
-        linkLeadingIcon: [options.theme.transitions && "group-active:-translate-x-0.5"]
+        linkLeadingIcon: "group-active:-translate-x-0.5 rtl:group-active:translate-x-0.5"
       },
       right: {
         link: "text-end",
-        linkLeadingIcon: [options.theme.transitions && "group-active:translate-x-0.5"]
+        linkLeadingIcon: "group-active:translate-x-0.5 rtl:group-active:-translate-x-0.5"
       }
     }
   }
@@ -7986,20 +8249,20 @@ 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 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",
-    top: "",
-    bottom: "hidden lg:flex lg:flex-col gap-6",
-    trigger: "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
+    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))]",
+    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] overflow-hidden focus:outline-none",
+    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",
     list: "min-w-0",
     listWithChildren: "ms-3",
     item: "min-w-0",
     itemWithChildren: "",
-    link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
+    link: "group relative text-sm flex items-center rounded-sm outline-primary/25 focus-visible:outline-3 py-1",
     linkText: "truncate",
     indicator: "",
     indicatorLine: "",
@@ -8100,6 +8363,7 @@ function getTemplates(options, uiConfig, nuxt, resolve) {
           const template = theme2[component];
           let result = typeof template === "function" ? template(options) : template;
           result = applyDefaultVariants(result, options.theme?.defaultVariants);
+          result = applyUnstyled(result, options.theme?.unstyled);
           result = applyPrefixToObject(result, options.theme?.prefix);
           const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
             const keys = Object.keys(values);
@@ -8387,7 +8651,47 @@ const publicComposables = {
   useResizable: ["useResizable"],
   useScrollShadow: ["useScrollShadow"],
   useScrollspy: ["useScrollspy"],
-  useToast: ["useToast"]
+  useToast: ["useToast"],
+  useTour: ["useTour"]
 };
 
-export { addTemplates as a, getTemplates as b, defaultOptions as d, getDefaultConfig as g, publicComposables as p, resolveColors as r };
+function parseIconName(icon, collections = [], fallback = false) {
+  const id = icon.replace(/^i[-:]/, "");
+  const colon = id.indexOf(":");
+  if (colon !== -1) {
+    return colon > 0 && colon < id.length - 1 ? [id.slice(0, colon), id.slice(colon + 1)] : void 0;
+  }
+  let collection;
+  for (const name of collections) {
+    if (id.startsWith(`${name}-`) && id.length > name.length + 1 && name.length > (collection?.length ?? 0)) {
+      collection = name;
+    }
+  }
+  if (collection) {
+    return [collection, id.slice(collection.length + 1)];
+  }
+  if (fallback) {
+    const dash = id.indexOf("-");
+    if (dash > 0 && dash < id.length - 1) {
+      return [id.slice(0, dash), id.slice(dash + 1)];
+    }
+  }
+}
+const trustedCollections = new Set(
+  Object.values(defaultIcons).map((icon) => parseIconName(icon, [], true)?.[0]).filter((collection) => !!collection)
+);
+function getClientBundleIcons(icons = {}) {
+  const names = /* @__PURE__ */ new Set();
+  for (const icon of Object.values(icons)) {
+    if (typeof icon !== "string") {
+      continue;
+    }
+    const parsed = parseIconName(icon, trustedCollections);
+    if (parsed && trustedCollections.has(parsed[0])) {
+      names.add(`${parsed[0]}:${parsed[1]}`);
+    }
+  }
+  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 };