@nuxt/ui 4.0.1 → 4.2.0

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

@@ -4,18 +4,62 @@
 
 <script setup>
 import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 import { useColorMode, useAppConfig } from "#imports";
 import { useLocale } from "../../composables/useLocale";
 import UButton from "../Button.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   color: { type: null, required: false, default: "neutral" },
-  variant: { type: null, required: false, default: "ghost" }
+  variant: { type: null, required: false, default: "ghost" },
+  label: { type: String, required: false },
+  activeColor: { type: null, required: false },
+  activeVariant: { type: null, required: false },
+  size: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
 });
-defineSlots();
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
@@ -27,20 +71,17 @@ const isDark = computed({
 </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>
+  <UButton
+    v-bind="{
+  ...buttonProps,
+  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
+  ...$attrs
+}"
+    @click="isDark = !isDark"
+  >
+    <template #leading="{ ui }">
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
-  </ClientOnly>
+  </UButton>
 </template>

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

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '@nuxt/ui';
-export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+import type { ButtonProps } from '../../types';
+export interface ColorModeButtonProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,16 +9,9 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, 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;
-}>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,7 +1,8 @@
-type __VLS_Props = {
+import type { ImgHTMLAttributes } from '../../types/html';
+export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes, 'src'> {
     dark: string;
     light: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,7 @@
+<script>
+
+</script>
+
 <script setup>
 import ImageComponent from "#build/ui-image-component";
 defineOptions({ inheritAttrs: false });

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

@@ -1,7 +1,8 @@
-type __VLS_Props = {
+import type { ImgHTMLAttributes } from '../../types/html';
+export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes, 'src'> {
     dark: string;
     light: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,8 @@
-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'> {
+import type { SelectMenuProps, SelectMenuItem } from '../../types';
+export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuItem[]>, 'icon' | 'items' | 'modelValue'> {
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,14 +4,56 @@
 
 <script setup>
 import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
 import { useColorMode, useAppConfig } from "#imports";
 import { useLocale } from "../../composables/useLocale";
 import USelectMenu from "../SelectMenu.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({});
+const props = defineProps({
+  id: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  searchInput: { type: [Boolean, Object], required: false, default: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  selectedIcon: { type: [String, Object], required: false },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true },
+  virtualize: { type: [Boolean, Object], required: false },
+  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false },
+  descriptionKey: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  createItem: { type: [Boolean, String, Object], required: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  resetSearchTermOnBlur: { type: Boolean, required: false },
+  resetSearchTermOnSelect: { type: Boolean, required: false },
+  highlightOnHover: { type: Boolean, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false }
+});
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const selectMenuProps = useForwardProps(props);
 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 },
@@ -31,18 +73,16 @@ const preference = computed({
   <ClientOnly v-if="!colorMode?.forced">
     <USelectMenu
       v-model="preference"
-      :search-input="false"
       :icon="preference?.icon"
-      v-bind="$attrs"
+      v-bind="{ ...selectMenuProps, ...$attrs }"
       :items="items"
     />
 
     <template #fallback>
       <USelectMenu
-        :search-input="false"
         :icon="items[0]?.icon"
-        v-bind="$attrs"
         :model-value="items[0]"
+        v-bind="{ ...selectMenuProps, ...$attrs }"
         :items="items"
         disabled
       />

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

@@ -1,6 +1,8 @@
-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'> {
+import type { SelectMenuProps, SelectMenuItem } from '../../types';
+export interface ColorModeSelectProps extends Omit<SelectMenuProps<SelectMenuItem[]>, 'icon' | 'items' | 'modelValue'> {
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -4,14 +4,32 @@
 
 <script setup>
 import { computed } from "vue";
+import { useForwardProps } from "reka-ui";
 import { useColorMode, useAppConfig } from "#imports";
 import { useLocale } from "../../composables/useLocale";
 import USwitch from "../Switch.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({});
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  value: { type: String, required: false },
+  defaultValue: { type: Boolean, required: false }
+});
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const switchProps = useForwardProps(props);
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
@@ -28,16 +46,22 @@ const isDark = computed({
       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"
+      v-bind="{
+  ...switchProps,
+  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
+  ...$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"
+        v-bind="{
+  ...switchProps,
+  'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
+  ...$attrs
+}"
         disabled
       />
     </template>

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

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

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

@@ -78,6 +78,7 @@ export interface ContentNavigationEmits extends AccordionRootEmits {
 type SlotProps<T> = (props: {
     link: T;
     active?: boolean;
+    ui: ContentNavigation['ui'];
 }) => any;
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
     'link': SlotProps<T>;

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

@@ -71,40 +71,41 @@ const defaultValue = computed(() => {
 
 <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 name="link" :link="link" :active="active" :ui="ui">
+      <slot name="link-leading" :link="link" :active="active" :ui="ui">
+        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :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">
+      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle], active })">
+        <slot name="link-title" :link="link" :active="active" :ui="ui">
           {{ 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 })" />
+        <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkTitleExternalIcon" :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">
+      <span v-if="link.badge || link.badge === 0 || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, link.ui?.linkTrailing] })">
+        <slot name="link-trailing" :link="link" :active="active" :ui="ui">
           <UBadge
-            v-if="link.badge"
+            v-if="link.badge || link.badge === 0"
             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"
+            data-slot="linkTrailingBadge"
             :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] })" />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :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] })">
+  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionRoot as="ul" :disabled="disabled" 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)">
+        <AccordionItem v-if="link.children?.length" as="li" data-slot="itemWithChildren" :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
           <AccordionTrigger
             as="button"
             :class="[
@@ -115,7 +116,7 @@ const defaultValue = computed(() => {
             <ReuseLinkTemplate :link="link" :active="link.active" />
           </AccordionTrigger>
 
-          <AccordionContent :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
+          <AccordionContent data-slot="content" :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
             <UContentNavigation
               v-bind="rootProps"
               :navigation="link.children"
@@ -129,15 +130,15 @@ const defaultValue = computed(() => {
               :ui="props.ui"
             >
               <template v-for="(_, name) in slots" #[name]="slotData">
-                <slot :name="name" :link="slotData.link" :active="slotData.active" />
+                <slot :name="name" v-bind="{ ...slotData, link }" />
               </template>
             </UContentNavigation>
           </AccordionContent>
         </AccordionItem>
 
-        <li v-else :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: level > 0 })">
+        <li v-else data-slot="item" :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 })">
+            <ULinkBase v-bind="slotProps" data-slot="link" :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>

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

@@ -78,6 +78,7 @@ export interface ContentNavigationEmits extends AccordionRootEmits {
 type SlotProps<T> = (props: {
     link: T;
     active?: boolean;
+    ui: ContentNavigation['ui'];
 }) => any;
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
     'link': SlotProps<T>;

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

@@ -91,7 +91,9 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     ui?: ContentSearch['slots'] & CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>['ui'];
 }
 export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem> & {
-    content(props?: {}): any;
+    content(props: {
+        close: () => void;
+    }): any;
 };
 declare const __VLS_export: <T extends ContentSearchLink>(__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<(ContentSearchProps<T> & {