@nuxt/ui 4.8.2 → 4.10.0

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

@@ -1,17 +1,19 @@
 import type { ChatStatus } from 'ai';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt-submit';
-import type { ButtonProps, ButtonSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps, ButtonSlots } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
 export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
     status?: ChatStatus;
     /**
-     * The icon displayed in the button when the status is `ready`.
+     * The icon displayed in the button when the status is `ready`. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.arrowUp
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The color of the button when the status is `ready`.
      * @defaultValue 'primary'
@@ -87,11 +89,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,7 +2,7 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-reasoning';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatReasoning = ComponentConfig<typeof theme, AppConfig, 'chatReasoning'>;
@@ -66,8 +66,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatRe
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     open: boolean;
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
     autoCloseDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatReasoningSlots>;

package/dist/runtime/components/ChatReasoning.vue

@@ -33,7 +33,7 @@ defineSlots();
 const props = useComponentProps("chatReasoning", _props);
 const { t, code } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatReasoning || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatReasoning || {} })({
   chevron: props.chevron
 }));
 const isControlled = computed(() => props.open !== void 0);

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

@@ -2,7 +2,7 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-reasoning';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatReasoning = ComponentConfig<typeof theme, AppConfig, 'chatReasoning'>;
@@ -66,8 +66,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatRe
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     open: boolean;
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
     autoCloseDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatReasoningSlots>;

package/dist/runtime/components/ChatShimmer.vue

@@ -18,7 +18,7 @@ const _props = defineProps({
 });
 const props = useComponentProps("chatShimmer", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatShimmer || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatShimmer || {} }));
 const spread = computed(() => props.text.length * props.spread);
 </script>
 

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

@@ -2,7 +2,8 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-tool';
-import type { IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatTool = ComponentConfig<typeof theme, AppConfig, 'chatTool'>;
@@ -56,6 +57,11 @@ export interface ChatToolProps extends Pick<CollapsibleRootProps, 'defaultOpen'
      * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
      */
     shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    /**
+     * Display a list of actions below the trigger, useful for tool approval flows.
+     * `{ size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
     class?: any;
     ui?: ChatTool['slots'];
 }
@@ -66,6 +72,7 @@ export interface ChatToolSlots {
     default?(props: {
         open: boolean;
     }): VNode[];
+    actions?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -77,8 +84,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatTo
     open: boolean;
     loading: boolean;
     variant: ChatTool["variants"]["variant"];
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatToolSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/ChatTool.vue

@@ -3,11 +3,12 @@ import theme from "#build/ui/chat-tool";
 </script>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
 import UIcon from "./Icon.vue";
 import UChatShimmer from "./ChatShimmer.vue";
 const _props = defineProps({
@@ -21,6 +22,7 @@ const _props = defineProps({
   chevron: { type: String, required: false, default: "trailing" },
   chevronIcon: { type: null, required: false },
   shimmer: { type: Object, required: false },
+  actions: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
@@ -32,7 +34,7 @@ const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("chatTool", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatTool || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatTool || {} })({
   variant: props.variant,
   chevron: props.chevron,
   loading: props.loading
@@ -45,6 +47,11 @@ function setOpen(value) {
   emits("update:open", value);
 }
 const hasContent = computed(() => !!slots.default);
+watch(() => !!props.actions?.length, (hasActions) => {
+  if (hasActions && hasContent.value && props.open === void 0 && props.defaultOpen === void 0) {
+    internalOpen.value = true;
+  }
+}, { immediate: true });
 const resolvedLoadingIcon = computed(() => props.loadingIcon || appConfig.ui.icons?.loading);
 const resolvedIcon = computed(() => props.loading ? resolvedLoadingIcon.value : props.icon);
 const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.chevronDown);
@@ -101,5 +108,16 @@ const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.
         <slot :open="isOpen" />
       </div>
     </CollapsibleContent>
+
+    <div
+      v-if="props.actions?.length || !!slots.actions"
+      data-slot="actions"
+      :data-state="hasContent && isOpen ? 'open' : 'closed'"
+      :class="ui.actions({ class: props.ui?.actions })"
+    >
+      <slot name="actions">
+        <UButton v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+      </slot>
+    </div>
   </CollapsibleRoot>
 </template>

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

@@ -2,7 +2,8 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-tool';
-import type { IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatTool = ComponentConfig<typeof theme, AppConfig, 'chatTool'>;
@@ -56,6 +57,11 @@ export interface ChatToolProps extends Pick<CollapsibleRootProps, 'defaultOpen'
      * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
      */
     shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    /**
+     * Display a list of actions below the trigger, useful for tool approval flows.
+     * `{ size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
     class?: any;
     ui?: ChatTool['slots'];
 }
@@ -66,6 +72,7 @@ export interface ChatToolSlots {
     default?(props: {
         open: boolean;
     }): VNode[];
+    actions?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -77,8 +84,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatTo
     open: boolean;
     loading: boolean;
     variant: ChatTool["variants"]["variant"];
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatToolSlots>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,7 +2,7 @@ import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
@@ -73,7 +73,7 @@ declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeo
     slots: CheckboxSlots;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: "indeterminate" | T) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Checkbox.vue

@@ -48,7 +48,7 @@ const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
   return rest;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkbox || {} })({
   size: size.value ?? props.size,
   color: color.value ?? props.color,
   variant: props.variant,
@@ -66,7 +66,7 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"

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

@@ -2,7 +2,7 @@ import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
@@ -73,7 +73,7 @@ declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeo
     slots: CheckboxSlots;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: "indeterminate" | T) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,7 @@ import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
-import type { CheckboxProps } from '../types';
+import type { CheckboxProps } from './Checkbox.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
@@ -86,7 +86,7 @@ declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKe
     slots: CheckboxGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,7 @@ import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
-import type { CheckboxProps } from '../types';
+import type { CheckboxProps } from './Checkbox.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
@@ -86,7 +86,7 @@ declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKe
     slots: CheckboxGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Chip.vue

@@ -26,7 +26,7 @@ const props = useComponentProps("chip", _props);
 const show = defineModel("show", { type: Boolean, ...{ default: true } });
 const { size } = useAvatarGroup(_props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chip || {} })({
   color: props.color,
   size: size.value ?? props.size,
   position: props.position,
@@ -36,8 +36,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <Slot v-bind="$attrs">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <Slot v-bind="{ ...$attrs, 'data-slot': void 0 }">
       <slot />
     </Slot>
 

package/dist/runtime/components/Collapsible.vue

@@ -24,7 +24,7 @@ const slots = defineSlots();
 const props = useComponentProps("collapsible", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "defaultOpen", "open", "disabled", "unmountOnHide"), emits);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.collapsible || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.collapsible || {} })());
 </script>
 
 <template>

package/dist/runtime/components/ColorPicker.vue

@@ -41,7 +41,7 @@ const _props = defineProps({
 const props = useComponentProps("colorPicker", _props);
 const modelValue = defineModel({ type: String, ...void 0 });
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.colorPicker || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.colorPicker || {} })({
   size: props.size
 }));
 const pickedColor = computed({

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

@@ -4,7 +4,13 @@ import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/command-palette';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { ChipProps } from './Chip.vue';
+import type { KbdProps } from './Kbd.vue';
+import type { InputProps } from './Input.vue';
+import type { LinkProps, LinkPropsKeys } from './Link.vue';
+import type { IconProps } from './Icon.vue';
 import type { GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>;
@@ -64,11 +70,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      */
     size?: CommandPalette['variants']['size'];
     /**
-     * The icon displayed in the input.
+     * The icon displayed in the input. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The icon displayed on the right side of the input.
      * @defaultValue appConfig.ui.icons.search
@@ -230,27 +236,27 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & {
+        onLeave?: ((event: Event) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
-        onLeave?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<T, G>;
-    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "leave", event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/CommandPalette.vue

@@ -29,7 +29,7 @@ defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   trailingIcon: { type: null, required: false },
   selectedIcon: { type: null, required: false },
   childrenIcon: { type: null, required: false },
@@ -89,7 +89,7 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.commandPalette || {} })({
   size: props.size,
   virtualize: !!props.virtualize
 }));
@@ -199,7 +199,13 @@ const filteredItems = computed(() => filteredGroups.value.flatMap((group) => gro
 const rootRef = useTemplateRef("rootRef");
 watch(filteredGroups, () => {
   nextTick(() => {
-    rootRef.value?.highlightFirstItem();
+    const root = rootRef.value;
+    const rootEl = root?.$el;
+    if (rootEl?.contains(document.activeElement)) {
+      root?.highlightFirstItem();
+    } else {
+      root?.highlightSelected(void 0, false);
+    }
   });
 });
 function navigate(item) {
@@ -312,18 +318,18 @@ function onSelect(e, item) {
     </ULink>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="props.selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot ref="rootRef" data-slot="root" v-bind="{ ...rootProps, ...$attrs }" :selection-behavior="props.selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-if="props.input" v-model="searchTerm" as-child>
       <UInput
         variant="none"
         :size="props.size"
-        v-bind="typeof props.input === 'object' ? props.input : {}"
         :placeholder="placeholder"
         :autofocus="props.autofocus"
         :loading="props.loading"
         :loading-icon="props.loadingIcon"
         :trailing-icon="props.trailingIcon"
-        :icon="props.icon || appConfig.ui.icons.search"
+        :icon="props.icon === false ? void 0 : props.icon ?? appConfig.ui.icons.search"
+        v-bind="typeof props.input === 'object' ? props.input : {}"
         data-slot="input"
         :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"

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

@@ -4,7 +4,13 @@ import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/command-palette';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { ChipProps } from './Chip.vue';
+import type { KbdProps } from './Kbd.vue';
+import type { InputProps } from './Input.vue';
+import type { LinkProps, LinkPropsKeys } from './Link.vue';
+import type { IconProps } from './Icon.vue';
 import type { GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>;
@@ -64,11 +70,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      */
     size?: CommandPalette['variants']['size'];
     /**
-     * The icon displayed in the input.
+     * The icon displayed in the input. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The icon displayed on the right side of the input.
      * @defaultValue appConfig.ui.icons.search
@@ -230,27 +236,27 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & {
+        onLeave?: ((event: Event) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
-        onLeave?: ((event: Event) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<T, G>;
-    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "leave", event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Container.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("container", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.container || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.container || {} }));
 </script>
 
 <template>

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

@@ -2,7 +2,10 @@ import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProp
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/context-menu';
-import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
+import type { KbdProps } from './Kbd.vue';
+import type { LinkProps } from './Link.vue';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
@@ -133,7 +136,7 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
     slots: ContextMenuSlots<T, NestedItem<T>>;
     emit: (evt: "update:open", payload: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ContextMenu.vue

@@ -35,7 +35,7 @@ const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "modal"), emits);
 const contentProps = toRef(() => props.content);
 const getProxySlots = () => omit(slots, ["default"]);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contextMenu || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.contextMenu || {} })({
   size: props.size
 }));
 </script>

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

@@ -2,7 +2,10 @@ import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProp
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/context-menu';
-import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { IconProps } from './Icon.vue';
+import type { KbdProps } from './Kbd.vue';
+import type { LinkProps } from './Link.vue';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
@@ -133,7 +136,7 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
     slots: ContextMenuSlots<T, NestedItem<T>>;
     emit: (evt: "update:open", payload: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];