@nuxt/ui 4.5.0 → 4.6.0

package/dist/runtime/components/Tooltip.d.vue.ts

@@ -1,4 +1,5 @@
 import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps, TooltipTriggerProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tooltip';
 import type { KbdProps } from '../types';
@@ -12,11 +13,14 @@ export interface TooltipProps extends TooltipRootProps {
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The content of the tooltip.
+     *
+     * Inherits from the `tooltip.content` of the {@link AppProps} component when not provided.
      * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
      */
     content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>;
     /**
      * Display an arrow alongside the tooltip.
+     * `{ rounded: true }`{lang="ts-type"}
      * @defaultValue false
      */
     arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>;
@@ -37,12 +41,12 @@ export interface TooltipProps extends TooltipRootProps {
 export interface TooltipEmits extends TooltipRootEmits {
 }
 export interface TooltipSlots {
-    default(props: {
+    default?(props: {
         open: boolean;
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         ui: Tooltip['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Tooltip.vue

@@ -5,7 +5,7 @@ import theme from "#build/ui/tooltip";
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from "reka-ui";
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits, injectTooltipProviderContext } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
@@ -33,10 +33,11 @@ const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("tooltip", props);
+const providerContext = injectTooltipProviderContext();
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "ignoreNonKeyboardFocus"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
-const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
-const arrowProps = toRef(() => props.arrow);
+const contentProps = toRef(() => defu(props.content, providerContext.content.value, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
+const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {} })({
   side: contentProps.value.side
 }));

package/dist/runtime/components/Tooltip.vue.d.ts

@@ -1,4 +1,5 @@
 import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps, TooltipTriggerProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tooltip';
 import type { KbdProps } from '../types';
@@ -12,11 +13,14 @@ export interface TooltipProps extends TooltipRootProps {
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The content of the tooltip.
+     *
+     * Inherits from the `tooltip.content` of the {@link AppProps} component when not provided.
      * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
      */
     content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>;
     /**
      * Display an arrow alongside the tooltip.
+     * `{ rounded: true }`{lang="ts-type"}
      * @defaultValue false
      */
     arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>;
@@ -37,12 +41,12 @@ export interface TooltipProps extends TooltipRootProps {
 export interface TooltipEmits extends TooltipRootEmits {
 }
 export interface TooltipSlots {
-    default(props: {
+    default?(props: {
         open: boolean;
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         ui: Tooltip['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Tree.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { TreeRootProps, TreeRootEmits, TreeItemSelectEvent, TreeItemToggleEvent } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
@@ -113,13 +114,13 @@ type SlotProps<T extends TreeItem> = (props: {
     handleSelect: () => void;
     handleToggle: () => void;
     ui: Tree['ui'];
-}) => any;
+}) => VNode[];
 export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
-    'item-wrapper': SlotProps<T[number]>;
-    'item': SlotProps<T[number]>;
-    'item-leading': SlotProps<T[number]>;
-    'item-label': SlotProps<T[number]>;
-    'item-trailing': SlotProps<T[number]>;
+    'item-wrapper'?: SlotProps<T[number]>;
+    'item'?: SlotProps<T[number]>;
+    'item-leading'?: SlotProps<T[number]>;
+    'item-label'?: SlotProps<T[number]>;
+    'item-trailing'?: SlotProps<T[number]>;
 } & DynamicSlots<T[number], undefined, {
     index: number;
     level: number;

package/dist/runtime/components/Tree.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { TreeRootProps, TreeRootEmits, TreeItemSelectEvent, TreeItemToggleEvent } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
@@ -113,13 +114,13 @@ type SlotProps<T extends TreeItem> = (props: {
     handleSelect: () => void;
     handleToggle: () => void;
     ui: Tree['ui'];
-}) => any;
+}) => VNode[];
 export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
-    'item-wrapper': SlotProps<T[number]>;
-    'item': SlotProps<T[number]>;
-    'item-leading': SlotProps<T[number]>;
-    'item-label': SlotProps<T[number]>;
-    'item-trailing': SlotProps<T[number]>;
+    'item-wrapper'?: SlotProps<T[number]>;
+    'item'?: SlotProps<T[number]>;
+    'item-leading'?: SlotProps<T[number]>;
+    'item-label'?: SlotProps<T[number]>;
+    'item-trailing'?: SlotProps<T[number]>;
 } & DynamicSlots<T[number], undefined, {
     index: number;
     level: number;

package/dist/runtime/components/User.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/user';
 import type { AvatarProps, ChipProps, LinkProps } from '../types';
@@ -31,12 +32,12 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props: {
+    avatar?(props: {
         ui: User['ui'];
-    }): any;
-    name(props?: {}): any;
-    description(props?: {}): any;
-    default(props?: {}): any;
+    }): VNode[];
+    name?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/User.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/user';
 import type { AvatarProps, ChipProps, LinkProps } from '../types';
@@ -31,12 +32,12 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props: {
+    avatar?(props: {
         ui: User['ui'];
-    }): any;
-    name(props?: {}): any;
-    description(props?: {}): any;
-    default(props?: {}): any;
+    }): VNode[];
+    name?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.d.vue.ts

@@ -4,5 +4,5 @@ export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuIte
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
-    searchInput: boolean | import("../Input.vue").InputProps;
+    searchInput: boolean | Omit<import("../Input.vue").InputProps, "modelValue" | "defaultValue">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeSelect.vue.d.ts

@@ -4,5 +4,5 @@ export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuIte
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
-    searchInput: boolean | import("../Input.vue").InputProps;
+    searchInput: boolean | Omit<import("../Input.vue").InputProps, "modelValue" | "defaultValue">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/color-mode/ColorModeSwitch.vue

@@ -24,7 +24,9 @@ const props = defineProps({
   name: { type: String, required: false },
   required: { type: Boolean, required: false },
   value: { type: String, required: false },
-  defaultValue: { type: Boolean, required: false }
+  defaultValue: { type: null, required: false },
+  trueValue: { type: null, required: false },
+  falseValue: { type: null, required: false }
 });
 const { t } = useLocale();
 const colorMode = useColorMode();

package/dist/runtime/components/content/ContentNavigation.d.vue.ts

@@ -1,4 +1,5 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ContentNavigationItem } from '@nuxt/content';
 import theme from '#build/ui/content/content-navigation';
@@ -77,14 +78,14 @@ export interface ContentNavigationEmits extends AccordionRootEmits {
 }
 type SlotProps<T> = (props: {
     link: T;
-    active?: boolean;
+    active: boolean;
     ui: ContentNavigation['ui'];
-}) => any;
+}) => VNode[];
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
-    'link': SlotProps<T>;
-    'link-leading': SlotProps<T>;
-    'link-title': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link'?: SlotProps<T>;
+    'link-leading'?: SlotProps<T>;
+    'link-title'?: SlotProps<T>;
+    'link-trailing'?: SlotProps<T>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentNavigation.vue

@@ -107,15 +107,22 @@ const defaultValue = computed(() => {
   <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
       <template v-for="(link, index) in navigation" :key="index">
-        <AccordionItem v-if="link.children?.length" as="li" data-slot="itemWithChildren" :class="ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
+        <AccordionItem
+          v-if="link.children?.length"
+          as="li"
+          :disabled="!!link.disabled"
+          data-slot="itemWithChildren"
+          :class="ui.itemWithChildren({ class: [uiProp?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })"
+          :value="String(index)"
+        >
           <AccordionTrigger
             as="button"
             :class="[
   ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
-  ui.trigger({ class: [uiProp?.trigger, link.ui?.trigger], disabled })
+  ui.trigger({ class: [uiProp?.trigger, link.ui?.trigger], disabled: !!link.disabled || disabled })
 ]"
           >
-            <ReuseLinkTemplate :link="link" :active="link.active" />
+            <ReuseLinkTemplate :link="link" :active="link.active || false" />
           </AccordionTrigger>
 
           <AccordionContent data-slot="content" :class="ui.content({ class: [uiProp?.content, link.ui?.content] })">

package/dist/runtime/components/content/ContentNavigation.vue.d.ts

@@ -1,4 +1,5 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { ContentNavigationItem } from '@nuxt/content';
 import theme from '#build/ui/content/content-navigation';
@@ -77,14 +78,14 @@ export interface ContentNavigationEmits extends AccordionRootEmits {
 }
 type SlotProps<T> = (props: {
     link: T;
-    active?: boolean;
+    active: boolean;
     ui: ContentNavigation['ui'];
-}) => any;
+}) => VNode[];
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
-    'link': SlotProps<T>;
-    'link-leading': SlotProps<T>;
-    'link-title': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link'?: SlotProps<T>;
+    'link-leading'?: SlotProps<T>;
+    'link-title'?: SlotProps<T>;
+    'link-trailing'?: SlotProps<T>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentSearch.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
@@ -94,10 +95,10 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     class?: any;
     ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
 }
-export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
-    content(props: {
+export type ContentSearchSlots = CommandPaletteSlots<ContentSearchItem> & {
+    content?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentSearch.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
@@ -94,10 +95,10 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     class?: any;
     ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
 }
-export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
-    content(props: {
+export type ContentSearchSlots = CommandPaletteSlots<ContentSearchItem> & {
+    content?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentSurround.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-surround';
@@ -38,12 +39,12 @@ export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSur
 type SlotProps<T> = (props: {
     link: T;
     ui: ContentSurround['ui'];
-}) => any;
+}) => VNode[];
 export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSurroundLink> {
-    'link': SlotProps<T>;
-    'link-leading': SlotProps<T>;
-    'link-title': SlotProps<T>;
-    'link-description': SlotProps<T>;
+    'link'?: SlotProps<T>;
+    'link-leading'?: SlotProps<T>;
+    'link-title'?: SlotProps<T>;
+    'link-description'?: SlotProps<T>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentSurround.vue

@@ -8,6 +8,7 @@ import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../../composables/useComponentUI";
+import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
 import UIcon from "../Icon.vue";
@@ -21,6 +22,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const { dir } = useLocale();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("contentSurround", props);
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
@@ -31,6 +33,8 @@ const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurround || {} })());
+const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft));
+const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight));
 </script>
 
 <template>
@@ -60,7 +64,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurrou
   </DefineLinkTemplate>
 
   <Primitive v-if="surround" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <ReuseLinkTemplate :link="surround[0]" :icon="prevIcon || appConfig.ui.icons.arrowLeft" direction="left" />
-    <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon || appConfig.ui.icons.arrowRight" direction="right" />
+    <ReuseLinkTemplate :link="surround[0]" :icon="prevIcon" direction="left" />
+    <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon" direction="right" />
   </Primitive>
 </template>

package/dist/runtime/components/content/ContentSurround.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-surround';
@@ -38,12 +39,12 @@ export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSur
 type SlotProps<T> = (props: {
     link: T;
     ui: ContentSurround['ui'];
-}) => any;
+}) => VNode[];
 export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSurroundLink> {
-    'link': SlotProps<T>;
-    'link-leading': SlotProps<T>;
-    'link-title': SlotProps<T>;
-    'link-description': SlotProps<T>;
+    'link'?: SlotProps<T>;
+    'link-leading'?: SlotProps<T>;
+    'link-title'?: SlotProps<T>;
+    'link-description'?: SlotProps<T>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentToc.d.vue.ts

@@ -1,4 +1,5 @@
 import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { TocLink } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-toc';
@@ -39,6 +40,11 @@ export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> exte
      * @defaultValue 'primary'
      */
     highlightColor?: ContentToc['variants']['highlightColor'];
+    /**
+     * The variant of the highlight indicator.
+     * @defaultValue 'straight'
+     */
+    highlightVariant?: ContentToc['variants']['highlightVariant'];
     links?: T[];
     class?: any;
     ui?: ContentToc['slots'];
@@ -48,29 +54,29 @@ export type ContentTocEmits = CollapsibleRootEmits & {
 };
 type SlotProps<T> = (props: {
     link: T;
-}) => any;
+}) => VNode[];
 export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
-    leading(props: {
+    leading?(props: {
         open: boolean;
         ui: ContentToc['ui'];
-    }): any;
-    default(props: {
+    }): VNode[];
+    default?(props: {
         open: boolean;
-    }): any;
-    trailing(props: {
+    }): VNode[];
+    trailing?(props: {
         open: boolean;
         ui: ContentToc['ui'];
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         links: T[];
-    }): any;
-    link: SlotProps<T>;
-    top(props: {
+    }): VNode[];
+    link?: SlotProps<T>;
+    top?(props: {
         links?: T[];
-    }): any;
-    bottom(props: {
+    }): VNode[];
+    bottom?(props: {
         links?: T[];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentToc.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   color: { type: null, required: false },
   highlight: { type: Boolean, required: false },
   highlightColor: { type: null, required: false },
+  highlightVariant: { type: null, required: false },
   links: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
@@ -41,9 +42,11 @@ const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
   }
 });
 const [DefineTriggerTemplate, ReuseTriggerTemplate] = createReusableTemplate();
+const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentToc || {} })({
   color: props.color,
   highlight: props.highlight,
+  highlightVariant: props.highlightVariant,
   highlightColor: props.highlightColor || props.color
 }));
 function scrollToHeading(id) {
@@ -54,17 +57,56 @@ function scrollToHeading(id) {
 function flattenLinks(links) {
   return links.flatMap((link) => [link, ...link.children ? flattenLinks(link.children) : []]);
 }
+function flattenLinksWithLevel(links, level = 0) {
+  return links.flatMap((link) => [
+    { link, level },
+    ...link.children ? flattenLinksWithLevel(link.children, level + 1) : []
+  ]);
+}
+const linkHeight = 1.75;
 const indicatorStyle = computed(() => {
   if (!activeHeadings.value?.length) {
     return;
   }
   const flatLinks = flattenLinks(props.links || []);
   const activeIndex = flatLinks.findIndex((link) => activeHeadings.value.includes(link.id));
-  const linkHeight = 28;
-  const gapSize = 0;
   return {
-    "--indicator-size": `${linkHeight * activeHeadings.value.length + gapSize * (activeHeadings.value.length - 1)}px`,
-    "--indicator-position": activeIndex >= 0 ? `${activeIndex * (linkHeight + gapSize)}px` : "0px"
+    "--indicator-size": `${linkHeight * activeHeadings.value.length}rem`,
+    "--indicator-position": activeIndex >= 0 ? `${activeIndex * linkHeight}rem` : "0rem"
+  };
+});
+const circuitMaskStyle = computed(() => {
+  if (!props.highlight || props.highlightVariant !== "circuit" || !props.links?.length) {
+    return;
+  }
+  const flatLinks = flattenLinksWithLevel(props.links);
+  const svgUnit = 16;
+  const svgLinkHeight = linkHeight * svgUnit;
+  const svgHeight = flatLinks.length * svgLinkHeight;
+  const x0 = 0.5;
+  const x1 = 10.5;
+  let path = "";
+  let currentX = x0;
+  let y = 0;
+  flatLinks.forEach((item, index) => {
+    const targetX = item.level > 0 ? x1 : x0;
+    const nextY = y + svgLinkHeight;
+    if (index === 0) {
+      path += `M${targetX} ${y}`;
+      currentX = targetX;
+    }
+    if (targetX !== currentX) {
+      path += ` L${targetX} ${y + 6}`;
+      currentX = targetX;
+    }
+    path += ` L${currentX} ${nextY - (index < flatLinks.length - 1 && flatLinks[index + 1]?.level !== item.level ? 6 : 0)}`;
+    y = nextY;
+  });
+  const svgPath = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 ${svgHeight}'><path d='${path}' stroke='black' stroke-width='1' fill='none'/></svg>`);
+  return {
+    width: "0.75rem",
+    height: `${flatLinks.length * linkHeight}rem`,
+    maskImage: `url("data:image/svg+xml,${svgPath}")`
   };
 });
 const nuxtApp = useNuxtApp();
@@ -110,6 +152,17 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
     </span>
   </DefineTriggerTemplate>
 
+  <DefineContentTemplate>
+    <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="{ ...indicatorStyle, ...circuitMaskStyle || {} }">
+      <div data-slot="indicatorLine" :class="ui.indicatorLine({ class: uiProp?.indicatorLine })" />
+      <div v-if="indicatorStyle" data-slot="indicatorActive" :class="ui.indicatorActive({ class: uiProp?.indicatorActive })" />
+    </div>
+
+    <slot name="content" :links="links">
+      <ReuseListTemplate :links="links" :level="0" />
+    </slot>
+  </DefineContentTemplate>
+
   <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="defaultOpen" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
@@ -122,11 +175,7 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
         </CollapsibleTrigger>
 
         <CollapsibleContent data-slot="content" :class="ui.content({ class: [uiProp?.content, 'lg:hidden'] })">
-          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="indicatorStyle" />
-
-          <slot name="content" :links="links">
-            <ReuseListTemplate :links="links" :level="0" />
-          </slot>
+          <ReuseContentTemplate />
         </CollapsibleContent>
 
         <p data-slot="trigger" :class="ui.trigger({ class: 'hidden lg:flex' })">
@@ -134,11 +183,7 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
         </p>
 
         <div data-slot="content" :class="ui.content({ class: [uiProp?.content, 'hidden lg:flex'] })">
-          <div v-if="highlight" data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" :style="indicatorStyle" />
-
-          <slot name="content" :links="links">
-            <ReuseListTemplate :links="links" :level="0" />
-          </slot>
+          <ReuseContentTemplate />
         </div>
       </template>