@nuxt/ui 4.5.1 → 4.6.1

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

@@ -0,0 +1,131 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/sidebar';
+import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
+type SidebarState = 'expanded' | 'collapsed';
+type SidebarMode = 'modal' | 'slideover' | 'drawer';
+type SidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface SidebarProps<T extends SidebarMode = SidebarMode> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'aside'
+     */
+    as?: any;
+    /**
+     * The visual variant of the sidebar.
+     * @defaultValue 'sidebar'
+     */
+    variant?: Sidebar['variants']['variant'];
+    /**
+     * The collapse behavior of the sidebar.
+     * - `offcanvas`: The sidebar slides out of view completely.
+     * - `icon`: The sidebar shrinks to icon-only width.
+     * - `none`: The sidebar is not collapsible.
+     * @defaultValue 'offcanvas'
+     */
+    collapsible?: Sidebar['variants']['collapsible'];
+    /**
+     * The side to render the sidebar on.
+     * @defaultValue 'left'
+     */
+    side?: Sidebar['variants']['side'];
+    /**
+     * The title displayed in the sidebar header.
+     */
+    title?: string;
+    /**
+     * The description displayed in the sidebar header.
+     */
+    description?: string;
+    /**
+     * Display a close button to collapse the sidebar.
+     * Only renders when `collapsible` is not `none`.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
+    /**
+     * Display a rail on the sidebar edge to toggle collapse.
+     * Only renders when `collapsible` is not `none`.
+     * @defaultValue false
+     */
+    rail?: boolean;
+    /**
+     * The mode of the sidebar menu on mobile.
+     * @defaultValue 'slideover'
+     */
+    mode?: T;
+    /**
+     * The props for the sidebar menu component on mobile.
+     */
+    menu?: SidebarMenu<T>;
+    class?: any;
+    ui?: Sidebar['slots'];
+}
+export interface SidebarSlots {
+    header?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    title?(props: {
+        state: SidebarState;
+    }): VNode[];
+    description?(props: {
+        state: SidebarState;
+    }): VNode[];
+    actions?(props: {
+        state: SidebarState;
+    }): VNode[];
+    close?(props: {
+        ui: Sidebar['ui'];
+        state: SidebarState;
+    }): VNode[];
+    default?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    footer?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    rail?(props: {
+        ui: Sidebar['ui'];
+        state: SidebarState;
+    }): VNode[];
+    content?(props: {
+        close: () => void;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends SidebarMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SidebarProps<T> & {
+        open?: boolean;
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: SidebarSlots;
+    emit: (event: "update:open", value: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Slideover.vue

@@ -41,7 +41,7 @@ const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
   if (!props.dismissible) {
-    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    const events = ["interactOutside", "escapeKeyDown"];
     return events.reduce((acc, curr) => {
       acc[curr] = (e) => {
         e.preventDefault();
@@ -79,14 +79,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
         @after-leave="emits('after:leave')"
         v-on="contentEvents"
       >
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
-          <DialogTitle v-if="title || !!slots.title">
+        <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
+          <DialogTitle v-if="!title && !slots.title" />
+          <DialogTitle v-else-if="!!slots.content">
             <slot name="title">
               {{ title }}
             </slot>
           </DialogTitle>
 
-          <DialogDescription v-if="description || !!slots.description">
+          <DialogDescription v-if="!description && !slots.description" />
+          <DialogDescription v-else-if="!!slots.content">
             <slot name="description">
               {{ description }}
             </slot>

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

@@ -1,4 +1,4 @@
-import type { SwitchRootProps } from 'reka-ui';
+import type { SwitchRootProps, SwitchRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
@@ -6,7 +6,7 @@ import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
+export interface SwitchProps<T = boolean> extends Pick<SwitchRootProps<T>, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue' | 'modelValue' | 'trueValue' | 'falseValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -43,9 +43,9 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
     class?: any;
     ui?: Switch['slots'];
 }
-export type SwitchEmits = {
+export interface SwitchEmits<T = boolean> extends SwitchRootEmits<T> {
     change: [event: Event];
-};
+}
 export interface SwitchSlots {
     label?(props: {
         label: string | undefined;
@@ -56,19 +56,22 @@ export interface SwitchSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps & {
-    modelValue?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (event: Event) => any;
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<SwitchProps & {
-    modelValue?: boolean;
-}> & Readonly<{
-    onChange?: ((event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SwitchSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SwitchProps<T> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: SwitchSlots;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Switch.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/switch";
 
 <script setup>
 import { computed, useAttrs, useId } from "vue";
-import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from "reka-ui";
+import { Primitive, SwitchRoot, SwitchThumb, useForwardPropsEmits, Label } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
@@ -29,14 +29,16 @@ 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 },
+  modelValue: { type: null, required: false },
+  trueValue: { type: null, required: false },
+  falseValue: { type: null, required: false }
 });
 const slots = defineSlots();
-const emits = defineEmits(["change"]);
-const modelValue = defineModel({ type: Boolean, ...{ default: void 0 } });
+const emits = defineEmits(["change", "update:modelValue"]);
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("switch", props);
-const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
+const rootProps = useForwardPropsEmits(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
 const attrs = useAttrs();
@@ -65,7 +67,6 @@ function onUpdate(value) {
       <SwitchRoot
         :id="id"
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
-        v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
         data-slot="base"

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

@@ -1,4 +1,4 @@
-import type { SwitchRootProps } from 'reka-ui';
+import type { SwitchRootProps, SwitchRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
@@ -6,7 +6,7 @@ import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
+export interface SwitchProps<T = boolean> extends Pick<SwitchRootProps<T>, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue' | 'modelValue' | 'trueValue' | 'falseValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -43,9 +43,9 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
     class?: any;
     ui?: Switch['slots'];
 }
-export type SwitchEmits = {
+export interface SwitchEmits<T = boolean> extends SwitchRootEmits<T> {
     change: [event: Event];
-};
+}
 export interface SwitchSlots {
     label?(props: {
         label: string | undefined;
@@ -56,19 +56,22 @@ export interface SwitchSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps & {
-    modelValue?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (event: Event) => any;
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<SwitchProps & {
-    modelValue?: boolean;
-}> & Readonly<{
-    onChange?: ((event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SwitchSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SwitchProps<T> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: SwitchSlots;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -52,7 +52,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */

package/dist/runtime/components/Table.vue

@@ -220,6 +220,9 @@ const tableApi = useVueTable({
   }
 });
 const rows = computed(() => tableApi.getRowModel().rows);
+const topRows = computed(() => props.virtualize ? [] : tableApi.getTopRows());
+const bottomRows = computed(() => props.virtualize ? [] : tableApi.getBottomRows());
+const centerRows = computed(() => topRows.value.length || bottomRows.value.length ? tableApi.getCenterRows() : rows.value);
 const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
   estimateSize: 65,
   overscan: 12
@@ -227,7 +230,7 @@ const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean"
 const virtualizer = !!props.virtualize && useVirtualizer({
   ...virtualizerProps.value,
   get count() {
-    return rows.value.length;
+    return centerRows.value.length;
   },
   getScrollElement: () => rootRef.value?.$el,
   estimateSize: (index) => {
@@ -311,6 +314,7 @@ defineExpose({
       :data-selected="row.getIsSelected()"
       :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
       :data-expanded="row.getIsExpanded()"
+      :data-pinned="row.getIsPinned() || void 0"
       :role="props.onSelect ? 'button' : void 0"
       :tabindex="props.onSelect ? 0 : void 0"
       data-slot="tr"
@@ -401,10 +405,12 @@ defineExpose({
         <slot name="body-top" />
 
         <template v-if="rows.length">
+          <ReuseRowTemplate v-for="row in topRows" :key="row.id" :row="row" />
+
           <template v-if="virtualizer">
-            <template v-for="(virtualRow, index) in virtualizer.getVirtualItems()" :key="rows[virtualRow.index]?.id">
+            <template v-for="(virtualRow, index) in virtualizer.getVirtualItems()" :key="centerRows[virtualRow.index]?.id">
               <ReuseRowTemplate
-                :row="rows[virtualRow.index]"
+                :row="centerRows[virtualRow.index]"
                 :style="{
   height: `${virtualRow.size}px`,
   transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
@@ -414,8 +420,10 @@ defineExpose({
           </template>
 
           <template v-else>
-            <ReuseRowTemplate v-for="row in rows" :key="row.id" :row="row" />
+            <ReuseRowTemplate v-for="row in centerRows" :key="row.id" :row="row" />
           </template>
+
+          <ReuseRowTemplate v-for="row in bottomRows" :key="row.id" :row="row" />
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">

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

@@ -52,7 +52,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */

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

@@ -13,6 +13,8 @@ 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>>;

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,9 +33,10 @@ 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 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

@@ -13,6 +13,8 @@ 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>>;

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.vue

@@ -107,12 +107,19 @@ 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 || false" />

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/ContentToc.d.vue.ts

@@ -40,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'];