@nuxt/ui 3.3.1 → 4.0.0-alpha.0

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

@@ -2,7 +2,8 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipCo
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tooltip';
 import type { KbdProps } from '../types';
-import type { EmitsToProps, ComponentConfig } from '../types/utils';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Tooltip = ComponentConfig<typeof theme, AppConfig, 'tooltip'>;
 export interface TooltipProps extends TooltipRootProps {
     /** The text content of the tooltip. */

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

@@ -1,7 +1,8 @@
 import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
-import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, ComponentConfig } from '../types/utils';
+import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
 export type TreeItem = {
     /**

package/dist/runtime/components/User.vue

@@ -0,0 +1,72 @@
+<script>
+import theme from "#build/ui/user";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UChip from "./Chip.vue";
+import UAvatar from "./Avatar.vue";
+import ULink from "./Link.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  description: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  onClick: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })({
+  size: props.size,
+  orientation: props.orientation,
+  to: !!props.to || !!props.onClick
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <slot name="avatar">
+      <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
+        <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+      </UChip>
+      <UAvatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <ULink
+        v-if="to"
+        :aria-label="name"
+        v-bind="{ to, target, ...$attrs }"
+        class="focus:outline-none peer"
+        tabindex="-1"
+        raw
+      >
+        <span class="absolute inset-0" aria-hidden="true" />
+      </ULink>
+
+      <slot>
+        <p v-if="name || !!slots.name" :class="ui.name({ class: props.ui?.name })">
+          <slot name="name">
+            {{ name }}
+          </slot>
+        </p>
+        <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </slot>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,47 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/user';
+import type { AvatarProps, ChipProps, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
+export interface UserProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    name?: string;
+    description?: string;
+    avatar?: Omit<AvatarProps, 'size'> & {
+        [key: string]: any;
+    };
+    chip?: boolean | Omit<ChipProps, 'size' | 'inset'>;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: User['variants']['size'];
+    /**
+     * The orientation of the user.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: User['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: User['slots'];
+}
+export interface UserSlots {
+    avatar(props?: {}): any;
+    name(props?: {}): any;
+    description(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,17 @@
+<script>
+
+</script>
+
+<script setup>
+import UAvatar from "../Avatar.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  light: { type: String, required: true },
+  dark: { type: String, required: true }
+});
+</script>
+
+<template>
+  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
+  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+</template>

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

@@ -0,0 +1,7 @@
+import type { AvatarProps } from '@nuxt/ui';
+export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+    light: string;
+    dark: string;
+}
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,46 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import UButton from "../Button.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" }
+});
+defineSlots();
+const { t } = useLocale();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+      :color="color"
+      :variant="variant"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <slot name="fallback">
+        <div class="size-8" />
+      </slot>
+    </template>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@nuxt/ui';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: ButtonProps["color"];
+    variant: ButtonProps["variant"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    fallback(props?: {}): any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,13 @@
+<script setup>
+import ImageComponent from "#build/ui-image-component";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  dark: { type: String, required: true },
+  light: { type: String, required: true }
+});
+</script>
+
+<template>
+  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    dark: string;
+    light: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,51 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import USelectMenu from "../SelectMenu.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocale();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const items = computed(() => [
+  { label: t("colorMode.system"), value: "system", icon: appConfig.ui.icons.system },
+  { label: t("colorMode.light"), value: "light", icon: appConfig.ui.icons.light },
+  { label: t("colorMode.dark"), value: "dark", icon: appConfig.ui.icons.dark }
+]);
+const preference = computed({
+  get() {
+    return items.value.find((option) => option.value === colorMode.preference) || items.value[0];
+  },
+  set(option) {
+    colorMode.preference = option.value;
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USelectMenu
+      v-model="preference"
+      :search-input="false"
+      :icon="preference?.icon"
+      v-bind="$attrs"
+      :items="items"
+    />
+
+    <template #fallback>
+      <USelectMenu
+        :search-input="false"
+        :icon="items[0]?.icon"
+        v-bind="$attrs"
+        :model-value="items[0]"
+        :items="items"
+        disabled
+      />
+    </template>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,5 @@
+import type { SelectMenuProps } from '@nuxt/ui';
+export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,45 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocale } from "../../composables/useLocale";
+import USwitch from "../Switch.vue";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocale();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USwitch
+      v-model="isDark"
+      :checked-icon="appConfig.ui.icons.dark"
+      :unchecked-icon="appConfig.ui.icons.light"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+    />
+
+    <template #fallback>
+      <USwitch
+        :checked-icon="appConfig.ui.icons.dark"
+        :unchecked-icon="appConfig.ui.icons.light"
+        :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+        v-bind="$attrs"
+        disabled
+      />
+    </template>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,5 @@
+import type { SwitchProps } from '@nuxt/ui';
+export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,137 @@
+<script>
+import theme from "#build/ui/content/content-navigation";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useRoute, useAppConfig } from "#imports";
+import { pickLinkProps } from "../../utils/link";
+import { tv } from "../../utils/tv";
+import { mapContentNavigationItem } from "../../utils/content";
+import UContentNavigation from "./ContentNavigation.vue";
+import ULink from "../Link.vue";
+import ULinkBase from "../LinkBase.vue";
+import UBadge from "../Badge.vue";
+import UIcon from "../Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  defaultOpen: { type: Boolean, required: false, default: void 0 },
+  trailingIcon: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  highlight: { type: Boolean, required: false, default: false },
+  highlightColor: { type: null, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  level: { type: Number, required: false, default: 0 },
+  navigation: { type: Array, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "multiple" },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
+const route = useRoute();
+const appConfig = useAppConfig();
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentNavigation || {} })({
+  color: props.color,
+  variant: props.variant,
+  highlight: props.highlight,
+  highlightColor: props.highlightColor || props.color
+}));
+const defaultValue = computed(() => {
+  if (props.defaultOpen === false) {
+    return void 0;
+  }
+  if (props.defaultOpen === void 0) {
+    return props.type === "single" ? "0" : props.navigation?.map((link, index2) => link.defaultOpen !== false && String(index2)).filter(Boolean);
+  }
+  const index = props.navigation?.findIndex((link) => route.path.startsWith(link.path));
+  const tyindex = index === -1 ? 0 : index;
+  return props.type === "multiple" ? [String(tyindex)] : String(tyindex);
+});
+</script>
+
+<template>
+  <DefineLinkTemplate v-slot="{ link, active }">
+    <slot name="link" :link="link" :active="active">
+      <slot name="link-leading" :link="link" :active="active">
+        <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+      </slot>
+
+      <span v-if="link.title || !!slots['link-title']" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
+        <slot name="link-title" :link="link" :active="active">
+          {{ link.title }}
+        </slot>
+
+        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkTitleExternalIcon({ class: [props.ui?.linkTitleExternalIcon, link.ui?.linkTitleExternalIcon], active })" />
+      </span>
+
+      <span v-if="link.badge || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
+        <slot name="link-trailing" :link="link" :active="active">
+          <UBadge
+            v-if="link.badge"
+            color="neutral"
+            variant="outline"
+            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            v-bind="typeof link.badge === 'string' || typeof link.badge === 'number' ? { label: link.badge } : link.badge"
+            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
+          />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+        </slot>
+      </span>
+    </slot>
+  </DefineLinkTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <AccordionRoot as="ul" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <template v-for="(link, index) in navigation" :key="index">
+        <AccordionItem v-if="link.children?.length" as="li" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
+          <AccordionTrigger
+            as="button"
+            :class="[
+  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled }),
+  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger] })
+]"
+          >
+            <ReuseLinkTemplate :link="link" :active="link.active" />
+          </AccordionTrigger>
+
+          <AccordionContent :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
+            <UContentNavigation
+              v-bind="rootProps"
+              :navigation="link.children"
+              :default-open="defaultOpen"
+              :level="level + 1"
+              :trailing-icon="trailingIcon"
+              :color="color"
+              :variant="variant"
+              :highlight="highlight"
+              :highlight-color="highlightColor"
+              :ui="props.ui"
+            >
+              <template v-for="(_, name) in slots" #[name]="slotData">
+                <slot :name="name" :link="slotData.link" :active="slotData.active" />
+              </template>
+            </UContentNavigation>
+          </AccordionContent>
+        </AccordionItem>
+
+        <li v-else :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: level > 0 })">
+          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active, disabled: !!link.disabled, level: level > 0 })">
+              <ReuseLinkTemplate :link="link" :active="active" />
+            </ULinkBase>
+          </ULink>
+        </li>
+      </template>
+    </AccordionRoot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,102 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import type { ContentNavigationItem } from '@nuxt/content';
+import theme from '#build/ui/content/content-navigation';
+import type { BadgeProps, LinkProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ContentNavigation = ComponentConfig<typeof theme, AppConfig, 'contentNavigation'>;
+export interface ContentNavigationLink extends ContentNavigationItem {
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * Display a badge on the link.
+     * `{ color: 'neutral', variant: 'outline', size: 'sm' }`{lang="ts-type"}
+     */
+    badge?: string | number | BadgeProps;
+    target?: LinkProps['target'];
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    disabled?: boolean;
+    children?: ContentNavigationLink[];
+    defaultOpen?: boolean;
+    active?: boolean;
+    class?: any;
+    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+}
+export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'nav'
+     */
+    as?: any;
+    /**
+     * When `true`, the tree will be opened based on the current route.
+     * When `false`, the tree will be closed.
+     * When `undefined` (default), the first item will be opened with `type="single"` and the first level will be opened with `type="multiple"`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The icon displayed to toggle the accordion.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ContentNavigation['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: ContentNavigation['variants']['variant'];
+    /**
+     * Display a line next to the active link.
+     * @defaultValue false
+     */
+    highlight?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    highlightColor?: ContentNavigation['variants']['highlightColor'];
+    /**
+     * When type is "single", allows closing content when clicking trigger for an open item.
+     * When type is "multiple", this prop has no effect.
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+    level?: number;
+    navigation?: T[];
+    class?: any;
+    ui?: ContentNavigation['slots'];
+}
+export interface ContentNavigationEmits extends AccordionRootEmits {
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active?: boolean;
+}) => any;
+export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-title': SlotProps<T>;
+    'link-trailing': SlotProps<T>;
+}
+declare const _default: <T extends ContentNavigationLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ContentNavigationProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ContentNavigationSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};