@nuxt/ui 4.8.2 → 4.9.0

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

@@ -84,6 +84,7 @@ const defaultOptions = {
   theme: {
     colors: void 0,
     transitions: true,
+    unstyled: false,
     defaultVariants: {
       color: void 0,
       size: void 0
@@ -131,6 +132,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 +253,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 +660,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 +739,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 +766,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,
@@ -788,7 +821,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 +847,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 +961,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 +1047,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 +1097,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 +1274,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 +1330,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"
       }
     },
@@ -1476,14 +1558,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: {
@@ -1508,26 +1590,27 @@ const chatShimmer = {
 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",
+    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"
   },
   variants: {
     variant: {
       inline: {
+        trigger: "rounded-sm outline-primary/25 focus-visible:outline-3",
         body: "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"
       }
     },
     chevron: {
@@ -1554,7 +1637,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 +1647,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 +1944,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"
   }
 };
 
@@ -2797,7 +2880,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 +2972,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 +3090,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 +3179,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 +3236,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 +3264,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 +3276,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 +3393,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 +3429,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 +3477,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 +3546,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 +3570,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 +3623,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 +3635,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 +3749,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 +3793,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 +3829,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 +3893,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 +3998,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 +4036,7 @@ const listbox = (options) => ({
     }
   }],
   defaultVariants: {
+    color: "primary",
     size: "md"
   }
 });
@@ -4044,7 +4166,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,7 +4180,7 @@ 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",
@@ -4074,12 +4196,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: {
@@ -4163,7 +4285,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 +4466,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 +4620,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 +4678,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 +4748,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 +4833,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 +4968,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 +4994,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 +5010,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 +5022,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,
@@ -5306,7 +5444,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 +5453,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 +5635,7 @@ const radioGroup = (options) => ({
 
 const scrollArea = {
   slots: {
-    root: "relative",
+    root: "relative outline-primary/25 focus-visible:outline-3",
     viewport: "relative flex",
     item: ""
   },
@@ -5521,7 +5659,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 +5752,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 +5781,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 +5911,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,9 +5922,16 @@ 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-[left,right,width] duration-200 ease-out",
+        rail: "transition-all ease-out"
+      }
+    },
     side: {
       left: {
         container: "left-0 border-e border-default",
@@ -6030,17 +6164,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: {
@@ -6149,7 +6283,7 @@ const stepper = (options) => ({
     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 +6345,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 +6404,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 +6415,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,11 +6511,11 @@ 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",
@@ -6468,6 +6602,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 +6615,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 +6689,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 +6971,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 +6985,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 +7087,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 +7101,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 +7194,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"
@@ -7236,7 +7379,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 = {
@@ -7267,7 +7410,7 @@ const callout = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `border border-${color}/25 bg-${color}/10 text-${color}-600 dark:text-${color}-300 [&_a]:text-${color} [&_a]:hover:border-${color} [&_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 +7428,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"
     }
   }],
@@ -7331,14 +7474,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 +7509,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 +7517,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 +7532,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,7 +7628,7 @@ 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",
@@ -7507,7 +7650,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 +7686,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 +7764,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] right-[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 +7806,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"
   }
 };
@@ -7771,13 +7914,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 +7932,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: {
@@ -7965,7 +8106,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",
@@ -7990,16 +8131,16 @@ const contentToc = (options) => ({
     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",
+    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",
     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",
     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 +8241,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 +8529,8 @@ 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 };