@nuxt/ui 4.7.0 → 4.8.0

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

@@ -6,6 +6,7 @@
 import { computed } from "vue";
 import { useRuntimeConfig } from "#imports";
 import ImageComponent from "#build/ui-image-component";
+import { usePrefix } from "../../composables/usePrefix";
 import { resolveBaseURL } from "../../utils";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -14,9 +15,10 @@ const props = defineProps({
 });
 const refinedLight = computed(() => resolveBaseURL(props.light, useRuntimeConfig().app.baseURL));
 const refinedDark = computed(() => resolveBaseURL(props.dark, useRuntimeConfig().app.baseURL));
+const prefix = usePrefix();
 </script>
 
 <template>
-  <component :is="ImageComponent" :src="refinedLight" class="dark:hidden" v-bind="$attrs" />
-  <component :is="ImageComponent" :src="refinedDark" class="hidden dark:block" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedLight" :class="prefix('dark:hidden')" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedDark" :class="prefix('hidden dark:block')" v-bind="$attrs" />
 </template>

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

@@ -13,6 +13,7 @@ const props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: null, required: false },
   label: { type: String, required: false },

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

@@ -4,10 +4,11 @@ import theme from "#build/ui/content/content-navigation";
 
 <script setup>
 import { computed } from "vue";
-import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from "reka-ui";
+import { useForwardProps } from "../../composables/useForwardProps";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useRoute, useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { pickLinkProps } from "../../utils/link";
 import { tv } from "../../utils/tv";
 import { mapContentNavigationItem } from "../../utils/content";
@@ -17,7 +18,7 @@ import ULinkBase from "../LinkBase.vue";
 import UBadge from "../Badge.vue";
 import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "nav" },
   defaultOpen: { type: Boolean, required: false, default: void 0 },
   trailingIcon: { type: null, required: false },
@@ -36,10 +37,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "collapsible", "type", "unmountOnHide"), emits);
+const props = useComponentProps("contentNavigation", _props);
+const rootProps = useForwardProps(reactivePick(props, "collapsible", "type", "unmountOnHide"), emits);
 const route = useRoute();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("contentNavigation", props);
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentNavigation || {} })({
   color: props.color,
@@ -75,68 +76,68 @@ const defaultValue = computed(() => {
   <DefineLinkTemplate v-slot="{ link, 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: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+        <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']" data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle], 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" data-slot="linkTitleExternalIcon" :class="ui.linkTitleExternalIcon({ class: [uiProp?.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.badge === 0 || link.children?.length && !disabled || link.trailingIcon || !!slots['link-trailing']" data-slot="linkTrailing" :class="ui.linkTrailing({ class: [uiProp?.linkTrailing, link.ui?.linkTrailing] })">
+      <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 || link.badge === 0"
             color="neutral"
             variant="outline"
-            :size="uiProp?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            :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: uiProp?.linkTrailingBadge })"
+            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
           />
-          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
-          <UIcon v-else-if="link.trailingIcon" :name="link.trailingIcon" data-slot="linkTrailingIcon" :class="ui.linkTrailingIcon({ class: [uiProp?.linkTrailingIcon, link.ui?.linkTrailingIcon] })" />
+          <UIcon v-if="link.children?.length && !disabled" :name="link.trailingIcon || props.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" 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">
+  <Primitive :as="props.as" v-bind="$attrs" :as-child="props.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="props.level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <template v-for="(link, index) in props.navigation" :key="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 })"
+          :class="ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren], level: props.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: !!link.disabled || disabled })
+  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
+  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger], disabled: !!link.disabled || disabled })
 ]"
           >
             <ReuseLinkTemplate :link="link" :active="link.active || false" />
           </AccordionTrigger>
 
-          <AccordionContent data-slot="content" :class="ui.content({ class: [uiProp?.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"
-              :default-open="defaultOpen"
-              :level="level + 1"
-              :trailing-icon="trailingIcon"
-              :color="color"
-              :variant="variant"
-              :highlight="highlight"
-              :highlight-color="highlightColor"
-              :ui="uiProp"
+              :default-open="props.defaultOpen"
+              :level="props.level + 1"
+              :trailing-icon="props.trailingIcon"
+              :color="props.color"
+              :variant="props.variant"
+              :highlight="props.highlight"
+              :highlight-color="props.highlightColor"
+              :ui="props.ui"
             >
               <template v-for="(_, name) in slots" #[name]="slotData">
                 <slot :name="name" v-bind="{ ...slotData, link: slotData.link }" />
@@ -145,9 +146,9 @@ const defaultValue = computed(() => {
           </AccordionContent>
         </AccordionItem>
 
-        <li v-else data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item], level: level > 0 })">
+        <li v-else data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: props.level > 0 })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
-            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.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: props.level > 0 })">
               <ReuseLinkTemplate :link="link" :active="active" />
             </ULinkBase>
           </ULink>

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

@@ -22,6 +22,21 @@ export interface ContentSearchFile {
     level: number;
     content: string;
 }
+export interface ContentSearchResult extends ContentSearchFile {
+    snippets?: {
+        title?: string;
+        content?: string;
+    };
+}
+export interface ContentSearchOptions {
+    limit?: number;
+    snippet?: {
+        columns?: ('title' | 'content')[];
+        around?: number;
+    };
+}
+export type ContentSearchStatus = 'idle' | 'loading' | 'ready' | 'error';
+export type ContentSearchFn = (query: string, opts?: ContentSearchOptions) => Promise<ContentSearchResult[]>;
 export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPaletteItem {
     level?: number;
     /**
@@ -56,8 +71,9 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
         fuseOptions: {
           ignoreLocation: true,
           includeMatches: true,
+          useTokenSearch: true,
           threshold: 0.1,
-          keys: ['label', 'suffix']
+          keys: ['label', 'description', 'suffix']
         },
         resultLimit: 12,
         matchAllWhenSearchEmpty: true
@@ -65,8 +81,19 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      */
     fuse?: UseFuseOptions<T>;
     /**
-     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
-     * Useful for large doc sets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles.
+     * Async search function (e.g. from [`useSearchCollection`](https://content.nuxt.com/docs/utils/use-search-collection)).
+     * When provided, ContentSearch calls it on each keystroke and uses the results instead of Fuse.
+     * Results are mapped, sanitized, and grouped by navigation internally.
+     */
+    search?: ContentSearchFn;
+    /**
+     * Status of the async search index (e.g. from `useSearchCollection`).
+     * When the status transitions to `'ready'`, the search is automatically re-triggered if there's a pending term.
+     */
+    searchStatus?: ContentSearchStatus;
+    /**
+     * Delay (in milliseconds) before the search is triggered (debounced).
+     * Keeps the input responsive by only running the search after typing settles.
      * Set to `0` to disable.
      * @defaultValue 100
      */

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

@@ -3,19 +3,19 @@ import theme from "#build/ui/content/content-search";
 </script>
 
 <script setup>
-import { computed, useTemplateRef } from "vue";
-import { useForwardProps } from "reka-ui";
+import { computed, shallowRef, useTemplateRef, watch } from "vue";
 import { defu } from "defu";
-import { reactivePick } from "@vueuse/core";
+import { reactivePick, refDebounced } from "@vueuse/core";
 import { useAppConfig, useColorMode, defineShortcuts } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
+import { useForwardProps } from "../../composables/useForwardProps";
 import { useContentSearch } from "../../composables/useContentSearch";
 import { useLocale } from "../../composables/useLocale";
 import { omit, transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
 import UModal from "../Modal.vue";
 import UCommandPalette from "../CommandPalette.vue";
-const props = defineProps({
+const _props = defineProps({
   size: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
   shortcut: { type: String, required: false, default: "meta_k" },
@@ -23,6 +23,8 @@ const props = defineProps({
   navigation: { type: Array, required: false },
   files: { type: Array, required: false },
   fuse: { type: Object, required: false },
+  search: { type: Function, required: false },
+  searchStatus: { type: String, required: false },
   searchDelay: { type: Number, required: false, default: 100 },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
@@ -45,44 +47,72 @@ const props = defineProps({
   groups: { type: Array, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("contentSearch", _props);
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
-const { open, mapNavigationItems, postFilter } = useContentSearch();
+const { open, mapNavigationItems, mapLinks, mapSearchResults, postFilter } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("contentSearch", props);
 const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon", "searchDelay"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
-    includeMatches: true
-  }
+    includeMatches: true,
+    useTokenSearch: true
+  },
+  resultLimit: 12
 }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch || {} })({
   size: props.size,
   fullscreen: props.fullscreen
 }));
 const commandPaletteRef = useTemplateRef("commandPaletteRef");
-const mappedLinksItems = computed(() => {
+const debouncedSearchTerm = refDebounced(searchTerm, () => props.searchDelay);
+const rawSearchResults = shallowRef([]);
+const searchResults = computed(() => mapSearchResults(rawSearchResults.value, props.navigation));
+let searchRequestId = 0;
+async function runSearch(term) {
+  const requestId = ++searchRequestId;
+  if (!props.search || !term) {
+    rawSearchResults.value = [];
+    return;
+  }
+  try {
+    const results = await props.search(term, {
+      limit: fuse.value.resultLimit,
+      snippet: { columns: ["title", "content"], around: 20 }
+    });
+    if (requestId !== searchRequestId) return;
+    rawSearchResults.value = results;
+  } catch (err) {
+    if (requestId !== searchRequestId) return;
+    console.error("[ContentSearch] search failed:", err);
+    rawSearchResults.value = [];
+  }
+}
+watch(debouncedSearchTerm, runSearch);
+watch(() => props.search, () => {
+  if (debouncedSearchTerm.value) {
+    runSearch(debouncedSearchTerm.value);
+  }
+});
+watch(() => props.searchStatus, (status) => {
+  if (status === "ready" && debouncedSearchTerm.value) {
+    runSearch(debouncedSearchTerm.value);
+  }
+});
+const linksGroup = computed(() => {
   if (!props.links?.length) {
-    return [];
+    return null;
   }
-  return props.links.flatMap((link) => [{
-    ...link,
-    suffix: link.description,
-    description: void 0,
-    icon: link.icon || appConfig.ui.icons.file,
-    children: void 0
-  }, ...link.children?.map((child) => ({
-    ...child,
-    prefix: link.label + " >",
-    suffix: child.description,
-    description: void 0,
-    icon: child.icon || link.icon || appConfig.ui.icons.file
-  })) || []]);
+  return { id: "links", label: t("contentSearch.links"), items: mapLinks(props.links) };
 });
-const mappedNavigationGroups = computed(() => {
+const searchGroups = computed(() => {
+  if (!searchTerm.value || !searchResults.value.length) return [];
+  return [{ id: "search", label: t("contentSearch.search"), items: searchResults.value, ignoreFilter: true }];
+});
+const navigationGroups = computed(() => {
   if (!props.navigation?.length) {
     return [];
   }
@@ -130,10 +160,14 @@ const themeGroup = computed(() => {
 });
 const groups = computed(() => {
   const groups2 = [];
-  if (mappedLinksItems.value.length) {
-    groups2.push({ id: "links", label: t("contentSearch.links"), items: mappedLinksItems.value });
+  if (linksGroup.value) {
+    groups2.push(linksGroup.value);
+  }
+  if (props.search) {
+    groups2.push(...searchGroups.value);
+  } else {
+    groups2.push(...navigationGroups.value);
   }
-  groups2.push(...mappedNavigationGroups.value);
   groups2.push(...props.groups || []);
   if (themeGroup.value) {
     groups2.push(themeGroup.value);
@@ -161,11 +195,11 @@ defineExpose({
 <template>
   <UModal
     v-model:open="open"
-    :title="title || t('contentSearch.title')"
-    :description="description || t('contentSearch.description')"
+    :title="props.title || t('contentSearch.title')"
+    :description="props.description || t('contentSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="ui.modal({ class: [uiProp?.modal, props.class] })"
+    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -176,7 +210,7 @@ defineExpose({
           :groups="groups"
           :fuse="fuse"
           :input="{ fixed: true }"
-          :ui="transformUI(omit(ui, ['modal']), uiProp)"
+          :ui="transformUI(omit(ui, ['modal']), props.ui)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >

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

@@ -22,6 +22,21 @@ export interface ContentSearchFile {
     level: number;
     content: string;
 }
+export interface ContentSearchResult extends ContentSearchFile {
+    snippets?: {
+        title?: string;
+        content?: string;
+    };
+}
+export interface ContentSearchOptions {
+    limit?: number;
+    snippet?: {
+        columns?: ('title' | 'content')[];
+        around?: number;
+    };
+}
+export type ContentSearchStatus = 'idle' | 'loading' | 'ready' | 'error';
+export type ContentSearchFn = (query: string, opts?: ContentSearchOptions) => Promise<ContentSearchResult[]>;
 export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPaletteItem {
     level?: number;
     /**
@@ -56,8 +71,9 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
         fuseOptions: {
           ignoreLocation: true,
           includeMatches: true,
+          useTokenSearch: true,
           threshold: 0.1,
-          keys: ['label', 'suffix']
+          keys: ['label', 'description', 'suffix']
         },
         resultLimit: 12,
         matchAllWhenSearchEmpty: true
@@ -65,8 +81,19 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      */
     fuse?: UseFuseOptions<T>;
     /**
-     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
-     * Useful for large doc sets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles.
+     * Async search function (e.g. from [`useSearchCollection`](https://content.nuxt.com/docs/utils/use-search-collection)).
+     * When provided, ContentSearch calls it on each keystroke and uses the results instead of Fuse.
+     * Results are mapped, sanitized, and grouped by navigation internally.
+     */
+    search?: ContentSearchFn;
+    /**
+     * Status of the async search index (e.g. from `useSearchCollection`).
+     * When the status transitions to `'ready'`, the search is automatically re-triggered if there's a pending term.
+     */
+    searchStatus?: ContentSearchStatus;
+    /**
+     * Delay (in milliseconds) before the search is triggered (debounced).
+     * Keeps the input responsive by only running the search after typing settles.
      * Set to `0` to disable.
      * @defaultValue 100
      */

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

@@ -47,10 +47,10 @@ export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKey
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
-    collapsed: boolean;
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
+    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -4,11 +4,11 @@ import theme from "#build/ui/content/content-search-button";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
+import { useForwardProps } from "../../composables/useForwardProps";
 import { useContentSearch } from "../../composables/useContentSearch";
 import { useLocale } from "../../composables/useLocale";
 import { omit, transformUI } from "../../utils";
@@ -17,7 +17,7 @@ import UButton from "../Button.vue";
 import UKbd from "../Kbd.vue";
 import UTooltip from "../Tooltip.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   icon: { type: null, required: false },
   label: { type: String, required: false },
   color: { type: null, required: false, default: "neutral" },
@@ -48,6 +48,7 @@ const props = defineProps({
   viewTransition: { type: Boolean, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("contentSearchButton", _props);
 const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
 const getProxySlots = () => omit(slots, ["trailing"]);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "variant", "collapsed", "tooltip", "kbds", "class", "ui"));
@@ -55,7 +56,6 @@ const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} :
 const { t } = useLocale();
 const { open } = useContentSearch();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("contentSearchButton", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearchButton || {} })({
   collapsed: props.collapsed
 }));
@@ -64,19 +64,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
 <template>
   <DefineButtonTemplate>
     <UButton
-      :icon="icon || appConfig.ui.icons.search"
-      :label="label || t('contentSearchButton.label')"
-      :variant="variant || (collapsed ? 'ghost' : 'outline')"
+      :icon="props.icon || appConfig.ui.icons.search"
+      :label="props.label || t('contentSearchButton.label')"
+      :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
       v-bind="{
   ...buttonProps,
-  ...collapsed ? {
+  ...props.collapsed ? {
     'square': true,
-    'aria-label': label || t('contentSearchButton.label')
+    'aria-label': props.label || t('contentSearchButton.label')
   } : {},
   ...$attrs
 }"
-      :class="ui.base({ class: [uiProp?.base, props.class] })"
-      :ui="transformUI(ui, uiProp)"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(ui, props.ui)"
       @click="open = true"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -84,10 +84,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
       </template>
 
       <template #trailing="{ ui: uiProxy }">
-        <div data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+        <div data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
           <slot name="trailing" :ui="uiProxy">
-            <template v-if="kbds?.length">
-              <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <template v-if="props.kbds?.length">
+              <UKbd v-for="(kbd, index) in props.kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </template>
           </slot>
         </div>
@@ -95,7 +95,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
     </UButton>
   </DefineButtonTemplate>
 
-  <UTooltip v-if="collapsed && tooltip" :text="label || t('contentSearchButton.label')" v-bind="tooltipProps">
+  <UTooltip v-if="props.collapsed && props.tooltip" :text="props.label || t('contentSearchButton.label')" v-bind="tooltipProps">
     <ReuseButtonTemplate />
   </UTooltip>
   <ReuseButtonTemplate v-else />

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

@@ -47,10 +47,10 @@ export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKey
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
-    collapsed: boolean;
+    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
+    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -7,13 +7,14 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../../composables/useComponentUI";
+import { useComponentProps } from "../../composables/useComponentProps";
 import { useLocale } from "../../composables/useLocale";
+import { usePrefix } from "../../composables/usePrefix";
 import { tv } from "../../utils/tv";
 import ULink from "../Link.vue";
 import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   prevIcon: { type: null, required: false },
   nextIcon: { type: null, required: false },
@@ -22,9 +23,10 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("contentSurround", _props);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("contentSurround", props);
+const prefix = usePrefix();
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
   props: {
     link: Object,
@@ -39,32 +41,32 @@ const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConf
 
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
-    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], direction })">
+    <ULink v-if="link" :to="link.path" raw data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], direction })">
       <slot name="link" :link="link" :ui="ui">
-        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [uiProp?.linkLeading, link.ui?.linkLeading] })">
+        <div data-slot="linkLeading" :class="ui.linkLeading({ class: [props.ui?.linkLeading, link.ui?.linkLeading] })">
           <slot name="link-leading" :link="link" :ui="ui">
-            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
+            <UIcon :name="link.icon || icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], direction })" />
           </slot>
         </div>
 
-        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [uiProp?.linkTitle, link.ui?.linkTitle] })">
+        <p data-slot="linkTitle" :class="ui.linkTitle({ class: [props.ui?.linkTitle, link.ui?.linkTitle] })">
           <slot name="link-title" :link="link" :ui="ui">
             {{ link.title }}
           </slot>
         </p>
 
-        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [uiProp?.linkDescription, link.ui?.linkDescription] })">
+        <p data-slot="linkDescription" :class="ui.linkDescription({ class: [props.ui?.linkDescription, link.ui?.linkDescription] })">
           <slot name="link-description" :link="link" :ui="ui">
             {{ link.description }}
           </slot>
         </p>
       </slot>
     </ULink>
-    <span v-else class="hidden sm:block">&nbsp;</span>
+    <span v-else :class="prefix('hidden sm:block')">&nbsp;</span>
   </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" direction="left" />
-    <ReuseLinkTemplate :link="surround[1]" :icon="nextIcon" direction="right" />
+  <Primitive v-if="props.surround" :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ReuseLinkTemplate :link="props.surround[0]" :icon="prevIcon" direction="left" />
+    <ReuseLinkTemplate :link="props.surround[1]" :icon="nextIcon" direction="right" />
   </Primitive>
 </template>