@nuxt/ui 4.3.0 → 4.5.0

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

@@ -9,6 +9,9 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, LinkPropsKeys |
      */
     variant?: ButtonProps['variant'];
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useColorMode, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import UButton from "../Button.vue";
 import UIcon from "../Icon.vue";
@@ -23,7 +24,7 @@ const props = defineProps({
   loadingAuto: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -41,6 +42,7 @@ const props = defineProps({
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("button", props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
 const isDark = computed({
   get() {
@@ -62,8 +64,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, 'hidden dark:inline-block'] })" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, 'dark:hidden'] })" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'hidden dark:inline-block'] })" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, 'dark:hidden'] })" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>

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

@@ -9,6 +9,9 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, LinkPropsKeys |
      */
     variant?: ButtonProps['variant'];
 }
-declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -3,6 +3,6 @@ export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttr
     dark: string;
     light: string;
 }
-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;
+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>;

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

@@ -3,15 +3,20 @@
 </script>
 
 <script setup>
+import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
 import ImageComponent from "#build/ui-image-component";
+import { resolveBaseURL } from "../../utils";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   dark: { type: String, required: true },
   light: { type: String, required: true }
 });
+const refinedLight = computed(() => resolveBaseURL(props.light, useRuntimeConfig().app.baseURL));
+const refinedDark = computed(() => resolveBaseURL(props.dark, useRuntimeConfig().app.baseURL));
 </script>
 
 <template>
-  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
-  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedLight" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="refinedDark" class="hidden dark:block" v-bind="$attrs" />
 </template>

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

@@ -3,6 +3,6 @@ export interface ColorModeImageProps extends /** @vue-ignore */ Omit<ImgHTMLAttr
     dark: string;
     light: string;
 }
-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;
+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>;

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

@@ -1,6 +1,8 @@
 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 _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
+    searchInput: boolean | import("../Input.vue").InputProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -19,6 +19,8 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   trailingIcon: { type: null, required: false },
   selectedIcon: { type: null, required: false },
+  clear: { type: [Boolean, Object], required: false },
+  clearIcon: { type: null, required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true },
@@ -27,7 +29,7 @@ const props = defineProps({
   labelKey: { type: null, required: false },
   descriptionKey: { type: null, required: false },
   defaultValue: { type: null, required: false },
-  modelModifiers: { type: Object, required: false },
+  modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
@@ -36,14 +38,16 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, 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 },
+  resetModelValueOnClear: { type: Boolean, required: false },
   highlightOnHover: { type: Boolean, required: false },
+  by: { type: [String, Function], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
   leadingIcon: { type: null, required: false },

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

@@ -1,6 +1,8 @@
 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 _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {
+    searchInput: boolean | import("../Input.vue").InputProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,6 +1,6 @@
 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;
 export default _default;
+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>;

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

@@ -18,7 +18,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },

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

@@ -1,6 +1,6 @@
 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;
 export default _default;
+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>;

package/dist/runtime/components/content/ContentNavigation.d.vue.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 & (typeof globalThis extends {
+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: import("vue").PublicProps & __VLS_PrettifyLocal<ContentNavigationProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -97,8 +101,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/ContentNavigation.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useRoute, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { pickLinkProps } from "../../utils/link";
 import { tv } from "../../utils/tv";
 import { mapContentNavigationItem } from "../../utils/content";
@@ -28,7 +29,7 @@ const props = defineProps({
   level: { type: Number, required: false, default: 0 },
   navigation: { type: Array, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   type: { type: String, required: false, default: "multiple" },
   unmountOnHide: { type: Boolean, required: false, default: true }
@@ -38,6 +39,7 @@ const slots = defineSlots();
 const rootProps = useForwardPropsEmits(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,
@@ -73,50 +75,50 @@ 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: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+        <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
       </slot>
 
-      <span v-if="link.title || !!slots['link-title']" data-slot="linkTitle" :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: [uiProp?.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: [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: [uiProp?.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: [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: [uiProp?.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="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            :size="uiProp?.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 })"
+            :class="ui.linkTrailingBadge({ class: uiProp?.linkTrailingBadge })"
           />
-          <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] })" />
+          <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] })" />
         </slot>
       </span>
     </slot>
   </DefineLinkTemplate>
 
-  <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 })">
+  <Primitive :as="as" v-bind="$attrs" :as-child="level > 0" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <AccordionRoot as="ul" :disabled="disabled" v-bind="rootProps" :default-value="defaultValue" :class="level > 0 ? ui.listWithChildren({ class: uiProp?.listWithChildren }) : ui.list({ class: uiProp?.list })">
       <template v-for="(link, index) in navigation" :key="index">
-        <AccordionItem v-if="link.children?.length" as="li" data-slot="itemWithChildren" :class="ui.itemWithChildren({ class: [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: [uiProp?.itemWithChildren, link.ui?.itemWithChildren], level: level > 0 })" :value="String(index)">
           <AccordionTrigger
             as="button"
             :class="[
-  ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: link.active, disabled: !!link.disabled || disabled }),
-  ui.trigger({ class: [props.ui?.trigger, link.ui?.trigger], disabled })
+  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 })
 ]"
           >
             <ReuseLinkTemplate :link="link" :active="link.active" />
           </AccordionTrigger>
 
-          <AccordionContent data-slot="content" :class="ui.content({ class: [props.ui?.content, link.ui?.content] })">
+          <AccordionContent data-slot="content" :class="ui.content({ class: [uiProp?.content, link.ui?.content] })">
             <UContentNavigation
               v-bind="rootProps"
               :navigation="link.children"
@@ -127,18 +129,18 @@ const defaultValue = computed(() => {
               :variant="variant"
               :highlight="highlight"
               :highlight-color="highlightColor"
-              :ui="props.ui"
+              :ui="uiProp"
             >
               <template v-for="(_, name) in slots" #[name]="slotData">
-                <slot :name="name" v-bind="{ ...slotData, link }" />
+                <slot :name="name" v-bind="{ ...slotData, link: slotData.link }" />
               </template>
             </UContentNavigation>
           </AccordionContent>
         </AccordionItem>
 
-        <li v-else data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item], level: level > 0 })">
+        <li v-else data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item], level: level > 0 })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(mapContentNavigationItem(link))" custom>
-            <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 })">
+            <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 })">
               <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 & (typeof globalThis extends {
+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: import("vue").PublicProps & __VLS_PrettifyLocal<ContentNavigationProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -97,8 +101,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

@@ -29,6 +29,10 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
     icon?: IconProps['name'];
 }
 export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ContentSearch['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue appConfig.ui.icons.search
@@ -95,23 +99,27 @@ 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<{
-    props: __VLS_PrettifyLocal<(ContentSearchProps<T> & {
+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: import("vue").PublicProps & __VLS_PrettifyLocal<(ContentSearchProps<T> & {
         searchTerm?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:searchTerm", value: string) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+        commandPaletteRef: Readonly<import("vue").ShallowRef<{} | null, {} | null>>;
     }>) => void;
     attrs: any;
     slots: ContentSearchSlots;
-    emit: (evt: "update:searchTerm", value: string) => void;
+    emit: (event: "update:searchTerm", value: string) => void;
 }>) => 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

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig, useColorMode, defineShortcuts } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useContentSearch } from "../../composables/useContentSearch";
 import { useLocale } from "../../composables/useLocale";
 import { omit, transformUI } from "../../utils";
@@ -15,6 +16,7 @@ import { tv } from "../../utils/tv";
 import UModal from "../Modal.vue";
 import UCommandPalette from "../CommandPalette.vue";
 const props = defineProps({
+  size: { type: null, required: false },
   icon: { type: null, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false },
@@ -30,7 +32,7 @@ const props = defineProps({
   fuse: { type: Object, required: false },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   overlay: { type: Boolean, required: false },
@@ -47,7 +49,8 @@ const { t } = useLocale();
 const { open, mapNavigationItems, postFilter } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
-const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
+const uiProp = useComponentUI("contentSearch", props);
+const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
@@ -56,6 +59,7 @@ const fuse = computed(() => defu({}, props.fuse, {
   }
 }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch || {} })({
+  size: props.size,
   fullscreen: props.fullscreen
 }));
 const commandPaletteRef = useTemplateRef("commandPaletteRef");
@@ -160,7 +164,7 @@ defineExpose({
     :description="description || t('contentSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
+    :class="ui.modal({ class: [uiProp?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -170,7 +174,8 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :ui="transformUI(omit(ui, ['modal']), props.ui)"
+          :input="{ fixed: true }"
+          :ui="transformUI(omit(ui, ['modal']), uiProp)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >

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

@@ -29,6 +29,10 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
     icon?: IconProps['name'];
 }
 export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ContentSearch['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue appConfig.ui.icons.search
@@ -95,23 +99,27 @@ 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<{
-    props: __VLS_PrettifyLocal<(ContentSearchProps<T> & {
+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: import("vue").PublicProps & __VLS_PrettifyLocal<(ContentSearchProps<T> & {
         searchTerm?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:searchTerm", value: string) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+        commandPaletteRef: Readonly<import("vue").ShallowRef<{} | null, {} | null>>;
     }>) => void;
     attrs: any;
     slots: ContentSearchSlots;
-    emit: (evt: "update:searchTerm", value: string) => void;
+    emit: (event: "update:searchTerm", value: string) => void;
 }>) => 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

@@ -44,9 +44,14 @@ export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKey
     ui?: ContentSearchButton['slots'] & ButtonProps['ui'];
     class?: any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 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;
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -8,6 +8,7 @@ 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 { useContentSearch } from "../../composables/useContentSearch";
 import { useLocale } from "../../composables/useLocale";
 import { omit, transformUI } from "../../utils";
@@ -24,7 +25,7 @@ const props = defineProps({
   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 },
+  ui: { type: Object, required: false },
   class: { type: null, required: false },
   activeColor: { type: null, required: false },
   activeVariant: { type: null, required: false },
@@ -54,6 +55,7 @@ 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
 }));
@@ -73,8 +75,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
   } : {},
   ...$attrs
 }"
-      :class="ui.base({ class: [props.ui?.base, props.class] })"
-      :ui="transformUI(ui, props.ui)"
+      :class="ui.base({ class: [uiProp?.base, props.class] })"
+      :ui="transformUI(ui, uiProp)"
       @click="open = true"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -82,7 +84,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
       </template>
 
       <template #trailing="{ ui: uiProxy }">
-        <div data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <div data-slot="trailing" :class="ui.trailing({ class: uiProp?.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

@@ -44,9 +44,14 @@ export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKey
     ui?: ContentSearchButton['slots'] & ButtonProps['ui'];
     class?: any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 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;
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;