@eslamdevui/ui 4.1.1-rc.1 → 4.3.0

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

@@ -19,7 +19,7 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "nav" },
   defaultOpen: { type: Boolean, required: false, default: void 0 },
-  trailingIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: null, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   highlight: { type: Boolean, required: false, default: false },
@@ -73,38 +73,39 @@ 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" :class="ui.linkLeadingIcon({ class: [props.ui?.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']" :class="ui.linkTitle({ class: [props.ui?.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" :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] })">
+      <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"
@@ -135,9 +136,9 @@ const defaultValue = computed(() => {
           </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

@@ -86,8 +86,12 @@ export interface ContentNavigationSlots<T extends ContentNavigationLink = Conten
     'link-title': SlotProps<T>;
     'link-trailing': SlotProps<T>;
 }
-declare const __VLS_export: <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<ContentNavigationProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | string[] | undefined) => void>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<ContentNavigationProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | string[] | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ContentNavigationSlots<T>;
@@ -95,8 +99,8 @@ declare const __VLS_export: <T extends ContentNavigationLink>(__VLS_props: NonNu
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/content/ContentSearch.d.vue.ts

@@ -2,7 +2,7 @@ import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/content/content-search';
-import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../../types';
+import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -59,7 +59,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      * @emits 'update:open'
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -95,12 +95,16 @@ export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<Content
         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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<(ContentSearchProps<T> & {
         searchTerm?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:searchTerm", value: string) => void>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:searchTerm", value: string) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+        commandPaletteRef: __VLS_UseTemplateRef<any>;
     }>) => void;
     attrs: any;
     slots: ContentSearchSlots;
@@ -108,8 +112,8 @@ declare const __VLS_export: <T extends ContentSearchLink>(__VLS_props: NonNullab
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/content/ContentSearch.vue

@@ -15,13 +15,13 @@ import { tv } from "../../utils/tv";
 import UModal from "../Modal.vue";
 import UCommandPalette from "../CommandPalette.vue";
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: [String, Object], required: false },
+  closeIcon: { type: null, required: false },
   shortcut: { type: String, required: false, default: "meta_k" },
   links: { type: Array, required: false },
   navigation: { type: Array, required: false },
@@ -44,7 +44,7 @@ const props = defineProps({
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
-const { open } = useContentSearch();
+const { open, mapNavigationItems, postFilter } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
@@ -58,12 +58,17 @@ const fuse = computed(() => defu({}, props.fuse, {
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch || {} })({
   fullscreen: props.fullscreen
 }));
-function mapLinksItems(links) {
-  return links.flatMap((link) => [{
+const commandPaletteRef = useTemplateRef("commandPaletteRef");
+const mappedLinksItems = computed(() => {
+  if (!props.links?.length) {
+    return [];
+  }
+  return props.links.flatMap((link) => [{
     ...link,
     suffix: link.description,
     description: void 0,
-    icon: link.icon || appConfig.ui.icons.file
+    icon: link.icon || appConfig.ui.icons.file,
+    children: void 0
   }, ...link.children?.map((child) => ({
     ...child,
     prefix: link.label + " >",
@@ -71,75 +76,65 @@ function mapLinksItems(links) {
     description: void 0,
     icon: child.icon || link.icon || appConfig.ui.icons.file
   })) || []]);
-}
-function mapNavigationItems(children, parent) {
-  return children.flatMap((link) => {
-    if (link.children?.length) {
-      return mapNavigationItems(link.children, link);
-    }
-    return props.files?.filter((file) => file.id === link.path || file.id.startsWith(`${link.path}#`))?.map((file) => mapFile(file, link, parent)) || [];
-  });
-}
-function mapFile(file, link, parent) {
-  const prefix = [...new Set([parent?.title, ...file.titles].filter(Boolean))];
+});
+const mappedNavigationGroups = computed(() => {
+  if (!props.navigation?.length) {
+    return [];
+  }
+  if (props.navigation.some((link) => !!link.children?.length)) {
+    return props.navigation.map((group) => ({
+      id: group.path,
+      label: group.title,
+      items: mapNavigationItems(group.children || [], props.files || []),
+      postFilter
+    }));
+  } else {
+    return [{ id: "docs", items: mapNavigationItems(props.navigation, props.files || []), postFilter }];
+  }
+});
+const themeGroup = computed(() => {
+  if (!props.colorMode || colorMode?.forced) {
+    return null;
+  }
   return {
-    prefix: prefix?.length ? prefix.join(" > ") + " >" : void 0,
-    label: file.id === link.path ? link.title : file.title,
-    suffix: file.content.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
-    to: file.id,
-    icon: link.icon || parent?.icon || (file.level > 1 ? appConfig.ui.icons.hash : appConfig.ui.icons.file),
-    level: file.level
+    id: "theme",
+    label: t("contentSearch.theme"),
+    items: [{
+      label: t("colorMode.system"),
+      icon: appConfig.ui.icons.system,
+      active: colorMode.preference === "system",
+      onSelect: () => {
+        colorMode.preference = "system";
+      }
+    }, {
+      label: t("colorMode.light"),
+      icon: appConfig.ui.icons.light,
+      active: colorMode.preference === "light",
+      onSelect: () => {
+        colorMode.preference = "light";
+      }
+    }, {
+      label: t("colorMode.dark"),
+      icon: appConfig.ui.icons.dark,
+      active: colorMode.preference === "dark",
+      onSelect: () => {
+        colorMode.preference = "dark";
+      }
+    }]
   };
-}
+});
 const groups = computed(() => {
   const groups2 = [];
-  if (props.links?.length) {
-    groups2.push({ id: "links", label: t("contentSearch.links"), items: mapLinksItems(props.links) });
-  }
-  if (props.navigation?.length) {
-    if (props.navigation.some((link) => !!link.children?.length)) {
-      groups2.push(...props.navigation.map((group) => ({ id: group.path, label: group.title, items: mapNavigationItems(group.children || []), postFilter })));
-    } else {
-      groups2.push({ id: "docs", items: mapNavigationItems(props.navigation), postFilter });
-    }
+  if (mappedLinksItems.value.length) {
+    groups2.push({ id: "links", label: t("contentSearch.links"), items: mappedLinksItems.value });
   }
+  groups2.push(...mappedNavigationGroups.value);
   groups2.push(...props.groups || []);
-  if (props.colorMode && !colorMode?.forced) {
-    groups2.push({
-      id: "theme",
-      label: t("contentSearch.theme"),
-      items: [{
-        label: t("colorMode.system"),
-        icon: appConfig.ui.icons.system,
-        active: colorMode.preference === "system",
-        onSelect: () => {
-          colorMode.preference = "system";
-        }
-      }, {
-        label: t("colorMode.light"),
-        icon: appConfig.ui.icons.light,
-        active: colorMode.preference === "light",
-        onSelect: () => {
-          colorMode.preference = "light";
-        }
-      }, {
-        label: t("colorMode.dark"),
-        icon: appConfig.ui.icons.dark,
-        active: colorMode.preference === "dark",
-        onSelect: () => {
-          colorMode.preference = "dark";
-        }
-      }]
-    });
+  if (themeGroup.value) {
+    groups2.push(themeGroup.value);
   }
   return groups2;
 });
-function postFilter(query, items) {
-  if (!query) {
-    return items?.filter((item) => item.level === 1);
-  }
-  return items;
-}
 function onSelect(item) {
   if (item.disabled) {
     return;
@@ -153,7 +148,6 @@ defineShortcuts({
     handler: () => open.value = !open.value
   }
 });
-const commandPaletteRef = useTemplateRef("commandPaletteRef");
 defineExpose({
   commandPaletteRef
 });
@@ -165,6 +159,7 @@ defineExpose({
     :title="title || t('contentSearch.title')"
     :description="description || t('contentSearch.description')"
     v-bind="modalProps"
+    data-slot="modal"
     :class="ui.modal({ class: [props.ui?.modal, props.class] })"
   >
     <template #content="contentData">

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

@@ -2,7 +2,7 @@ import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/content/content-search';
-import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../../types';
+import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -59,7 +59,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      * @emits 'update:open'
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -95,12 +95,16 @@ export type ContentSearchSlots = CommandPaletteSlots<CommandPaletteGroup<Content
         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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<(ContentSearchProps<T> & {
         searchTerm?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:searchTerm", value: string) => void>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:searchTerm", value: string) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+        commandPaletteRef: __VLS_UseTemplateRef<any>;
     }>) => void;
     attrs: any;
     slots: ContentSearchSlots;
@@ -108,8 +112,8 @@ declare const __VLS_export: <T extends ContentSearchLink>(__VLS_props: NonNullab
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/content/ContentSearchButton.d.vue.ts

@@ -1,9 +1,9 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-search-button';
-import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../../types';
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>;
-export interface ContentSearchButtonProps {
+export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'label' | 'color' | 'variant'> {
     /**
      * The icon displayed in the button.
      * @defaultValue appConfig.ui.icons.search
@@ -25,7 +25,6 @@ export interface ContentSearchButtonProps {
      * Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
      */
     variant?: ButtonProps['variant'];
-    size?: ButtonProps['size'];
     /**
      * Whether the button is collapsed.
      * @defaultValue true
@@ -45,14 +44,14 @@ export interface ContentSearchButtonProps {
     ui?: ContentSearchButton['slots'] & ButtonProps['ui'];
     class?: any;
 }
+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";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
     collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -6,7 +6,7 @@ import theme from "#build/ui/content/content-search-button";
 import { computed, toRef } from "vue";
 import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
-import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useContentSearch } from "../../composables/useContentSearch";
 import { useLocale } from "../../composables/useLocale";
@@ -17,26 +17,46 @@ import UKbd from "../Kbd.vue";
 import UTooltip from "../Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   label: { type: String, required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false },
-  size: { type: null, required: false },
   collapsed: { type: Boolean, required: false, default: true },
   tooltip: { type: [Boolean, Object], required: false, default: false },
   kbds: { type: Array, required: false, default: () => ["meta", "k"] },
   ui: { type: void 0, required: false },
-  class: { type: null, required: false }
+  class: { type: null, 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 },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: null, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  exactActiveClass: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false }
 });
 const slots = defineSlots();
 const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
 const getProxySlots = () => omit(slots, ["trailing"]);
-const rootProps = useForwardProps(reactivePick(props, "color", "size"));
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "variant", "collapsed", "tooltip", "kbds", "class", "ui"));
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
 const { open } = useContentSearch();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearchButton || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearchButton || {} })({
+  collapsed: props.collapsed
+}));
 </script>
 
 <template>
@@ -46,10 +66,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
       :label="label || t('contentSearchButton.label')"
       :variant="variant || (collapsed ? 'ghost' : 'outline')"
       v-bind="{
-  ...rootProps,
+  ...buttonProps,
   ...collapsed ? {
     'square': true,
-    'label': void 0,
     'aria-label': label || t('contentSearchButton.label')
   } : {},
   ...$attrs
@@ -62,8 +81,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <template v-if="!collapsed" #trailing="{ ui: uiProxy }">
-        <div :class="ui.trailing({ class: props.ui?.trailing })">
+      <template #trailing="{ ui: uiProxy }">
+        <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" />

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

@@ -1,9 +1,9 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-search-button';
-import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../../types';
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>;
-export interface ContentSearchButtonProps {
+export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'label' | 'color' | 'variant'> {
     /**
      * The icon displayed in the button.
      * @defaultValue appConfig.ui.icons.search
@@ -25,7 +25,6 @@ export interface ContentSearchButtonProps {
      * Defaults to 'outline' when not collapsed, 'ghost' when collapsed.
      */
     variant?: ButtonProps['variant'];
-    size?: ButtonProps['size'];
     /**
      * Whether the button is collapsed.
      * @defaultValue true
@@ -45,14 +44,14 @@ export interface ContentSearchButtonProps {
     ui?: ContentSearchButton['slots'] & ButtonProps['ui'];
     class?: any;
 }
+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";
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
     collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -45,8 +45,12 @@ export interface ContentSurroundSlots<T extends ContentSurroundLink = ContentSur
     'link-title': SlotProps<T>;
     'link-description': SlotProps<T>;
 }
-declare const __VLS_export: <T extends ContentSurroundLink>(__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<ContentSurroundProps<T>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ContentSurroundLink>(__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: __VLS_PrettifyLocal<ContentSurroundProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ContentSurroundSlots<T>;
@@ -54,8 +58,8 @@ declare const __VLS_export: <T extends ContentSurroundLink>(__VLS_props: NonNull
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/content/ContentSurround.vue

@@ -13,8 +13,8 @@ import UIcon from "../Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
-  prevIcon: { type: [String, Object], required: false },
-  nextIcon: { type: [String, Object], required: false },
+  prevIcon: { type: null, required: false },
+  nextIcon: { type: null, required: false },
   surround: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
@@ -33,21 +33,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurrou
 
 <template>
   <DefineLinkTemplate v-slot="{ link, icon, direction }">
-    <ULink v-if="link" :to="link.path" raw :class="ui.link({ class: [props.ui?.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 :class="ui.linkLeading({ class: [props.ui?.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" :class="ui.linkLeadingIcon({ class: [props.ui?.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 :class="ui.linkTitle({ class: [props.ui?.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 :class="ui.linkDescription({ class: [props.ui?.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>
@@ -57,7 +57,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurrou
     <span v-else class="hidden lg:block">&nbsp;</span>
   </DefineLinkTemplate>
 
-  <Primitive v-if="surround" :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive v-if="surround" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.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" />
   </Primitive>