@nuxt/ui 4.8.1 → 4.9.0

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

@@ -1,4 +1,4 @@
-import type { VNode } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
@@ -57,7 +57,9 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
     ui?: ChatMessages['slots'];
 }
 export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
-    default?(props?: {}): VNode[];
+    default?(props: {
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }): VNode[];
     indicator?(props: {
         ui: ChatMessages['ui'];
     }): VNode[];
@@ -76,7 +78,9 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     props: import("vue").PublicProps & __VLS_PrettifyLocal<ChatMessagesProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }>) => void;
     attrs: any;
     slots: ChatMessagesSlots<T>;
     emit: {};

package/dist/runtime/components/ChatMessages.vue

@@ -183,6 +183,9 @@ onMounted(() => {
     }, { childList: true, subtree: true });
   }
 });
+defineExpose({
+  registerMessageRef
+});
 </script>
 
 <template>
@@ -193,7 +196,7 @@ onMounted(() => {
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
-    <slot>
+    <slot :register-message-ref="registerMessageRef">
       <template v-for="message in props.messages" :key="message.id">
         <UChatMessage
           v-if="message.parts?.length"

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

@@ -1,4 +1,4 @@
-import type { VNode } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
@@ -57,7 +57,9 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
     ui?: ChatMessages['slots'];
 }
 export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
-    default?(props?: {}): VNode[];
+    default?(props: {
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }): VNode[];
     indicator?(props: {
         ui: ChatMessages['ui'];
     }): VNode[];
@@ -76,7 +78,9 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     props: import("vue").PublicProps & __VLS_PrettifyLocal<ChatMessagesProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }>) => void;
     attrs: any;
     slots: ChatMessagesSlots<T>;
     emit: {};

package/dist/runtime/components/ChatPrompt.vue

@@ -68,6 +68,13 @@ function handleEnter(event) {
   }
   onEnter(event);
 }
+function onKeydown(event) {
+  if (event.key === "Enter") {
+    handleEnter(event);
+  } else if (event.key === "Escape") {
+    blur(event);
+  }
+}
 defineExpose({
   textareaRef: toRef(() => textareaRef.value?.textareaRef)
 });
@@ -90,9 +97,8 @@ defineExpose({
       :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
       data-slot="body"
       :class="ui.body({ class: props.ui?.body })"
-      @keydown.enter="handleEnter"
+      @keydown="onKeydown"
       @compositionend="onCompositionEnd"
-      @keydown.esc="blur"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />

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

@@ -7,11 +7,11 @@ type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubm
 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'

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -15,7 +15,7 @@ import UButton from "./Button.vue";
 defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   status: { type: String, required: false, default: "ready" },
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   streamingIcon: { type: null, required: false },
@@ -59,7 +59,7 @@ const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "varian
 const disabled = computed(() => props.status === "ready" ? props.disabled : false);
 const statusButtonProps = computed(() => ({
   ready: {
-    icon: props.icon || appConfig.ui.icons.arrowUp,
+    icon: props.icon === false ? void 0 : props.icon ?? appConfig.ui.icons.arrowUp,
     color: props.color,
     variant: props.variant,
     type: "submit"

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

@@ -7,11 +7,11 @@ type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubm
 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'

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

@@ -64,11 +64,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

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 },
@@ -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) {
@@ -317,13 +323,13 @@ function onSelect(e, item) {
       <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

@@ -64,11 +64,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

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-search';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { ButtonProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, LinkPropsKeys } from '../types';
+import type { ButtonProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, LinkPropsKeys, InputProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>;
 export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
@@ -17,6 +17,12 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * Configure the input or hide it with `false`.
+     * `{ fixed: true }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    input?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'

package/dist/runtime/components/DashboardSearch.vue

@@ -17,6 +17,7 @@ import UModal from "./Modal.vue";
 const _props = defineProps({
   size: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
+  input: { type: [Boolean, Object], required: false },
   shortcut: { type: String, required: false, default: "meta_k" },
   fuse: { type: Object, required: false },
   searchDelay: { type: Number, required: false, default: 100 },
@@ -32,7 +33,7 @@ const _props = defineProps({
   fullscreen: { type: Boolean, required: false, default: false },
   modal: { type: Boolean, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true },
-  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 },
@@ -63,6 +64,12 @@ const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "trailingIcon", "selectedIcon", "childrenIcon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon", "back", "backIcon", "disabled", "highlightOnHover", "labelKey", "descriptionKey", "preserveGroupOrder", "virtualize", "searchDelay"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
+const inputProps = computed(() => {
+  if (props.input === false) {
+    return false;
+  }
+  return defu(typeof props.input === "object" ? props.input : {}, { fixed: true });
+});
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
@@ -142,7 +149,7 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :input="{ fixed: true }"
+          :input="inputProps"
           :ui="transformUI(omit(ui, ['modal']), props.ui)"
           @update:model-value="onSelect"
           @update:open="open = $event"

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-search';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { ButtonProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, LinkPropsKeys } from '../types';
+import type { ButtonProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, LinkPropsKeys, InputProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>;
 export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
@@ -17,6 +17,12 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * Configure the input or hide it with `false`.
+     * `{ fixed: true }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    input?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'

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

@@ -5,11 +5,11 @@ import type { ComponentConfig } from '../types/tv';
 type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>;
 export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'label' | 'color' | 'variant'> {
     /**
-     * The icon displayed in the button.
+     * The icon displayed in the button. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The label displayed in the button.
      * @defaultValue t('dashboardSearchButton.label')

package/dist/runtime/components/DashboardSearchButton.vue

@@ -18,7 +18,7 @@ import UKbd from "./Kbd.vue";
 import UTooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const _props = defineProps({
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   label: { type: String, required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false },
@@ -65,7 +65,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
 <template>
   <DefineButtonTemplate>
     <UButton
-      :icon="props.icon || appConfig.ui.icons.search"
+      :icon="props.icon === false ? void 0 : props.icon ?? appConfig.ui.icons.search"
       :label="props.label || t('dashboardSearchButton.label')"
       :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
       v-bind="{

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

@@ -5,11 +5,11 @@ import type { ComponentConfig } from '../types/tv';
 type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>;
 export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'label' | 'color' | 'variant'> {
     /**
-     * The icon displayed in the button.
+     * The icon displayed in the button. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The label displayed in the button.
      * @defaultValue t('dashboardSearchButton.label')

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

@@ -15,11 +15,11 @@ export interface FileUploadProps<M extends boolean = false> extends /** @vue-ign
     id?: string;
     name?: string;
     /**
-     * The icon to display.
+     * The icon to display. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.upload
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     label?: string;
     description?: string;
     /**
@@ -127,6 +127,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     }): VNode[];
     'files'?(props: {
         files: FileUploadFiles<M>;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'files-top'?(props: {
         files: FileUploadFiles<M>;
@@ -141,6 +142,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file'?(props: {
         file: File;
         index: number;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'file-leading'?(props: {
         file: File;
@@ -159,6 +161,7 @@ export interface FileUploadSlots<M extends boolean = false> {
         file: File;
         index: number;
         ui: FileUpload['ui'];
+        removeFile: (index?: number) => void;
     }): VNode[];
 }
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/FileUpload.vue

@@ -20,7 +20,7 @@ const _props = defineProps({
   as: { type: null, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   label: { type: String, required: false },
   description: { type: String, required: false },
   color: { type: null, required: false },
@@ -146,9 +146,9 @@ defineExpose({
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
       <div data-slot="files" :class="ui.files({ class: props.ui?.files })">
-        <slot name="files" :files="modelValue">
+        <slot name="files" :files="modelValue" :remove-file="removeFile">
           <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" data-slot="file" :class="ui.file({ class: props.ui?.file })">
-            <slot name="file" :file="file" :index="index">
+            <slot name="file" :file="file" :index="index" :remove-file="removeFile">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
                 <UAvatar
                   :as="{ img: 'img' }"
@@ -174,7 +174,7 @@ defineExpose({
                 </span>
               </div>
 
-              <slot name="file-trailing" :file="file" :index="index" :ui="ui">
+              <slot name="file-trailing" :file="file" :index="index" :ui="ui" :remove-file="removeFile">
                 <UButton
                   v-if="props.fileDelete"
                   color="neutral"
@@ -224,8 +224,10 @@ defineExpose({
 
         <div v-if="position === 'inside' ? !props.preview || (multiple ? !modelValue?.length : !modelValue) : true" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="variant === 'button'" :name="props.icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
-            <UAvatar v-else :icon="props.icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+            <template v-if="props.icon !== false">
+              <UIcon v-if="variant === 'button'" :name="props.icon ?? appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+            </template>
           </slot>
 
           <template v-if="variant !== 'button'">

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

@@ -15,11 +15,11 @@ export interface FileUploadProps<M extends boolean = false> extends /** @vue-ign
     id?: string;
     name?: string;
     /**
-     * The icon to display.
+     * The icon to display. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.upload
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     label?: string;
     description?: string;
     /**
@@ -127,6 +127,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     }): VNode[];
     'files'?(props: {
         files: FileUploadFiles<M>;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'files-top'?(props: {
         files: FileUploadFiles<M>;
@@ -141,6 +142,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file'?(props: {
         file: File;
         index: number;
+        removeFile: (index?: number) => void;
     }): VNode[];
     'file-leading'?(props: {
         file: File;
@@ -159,6 +161,7 @@ export interface FileUploadSlots<M extends boolean = false> {
         file: File;
         index: number;
         ui: FileUpload['ui'];
+        removeFile: (index?: number) => void;
     }): VNode[];
 }
 declare const _default: typeof __VLS_export;

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

@@ -22,10 +22,10 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     /** Disable all inputs inside the form. */
     disabled?: boolean;
     /**
-     * Path of the form's state within it's parent form.
-     * Used for nesting forms. Only available if `nested` is true.
+     * The `name` attribute of the form element.
+     * For nested forms (`nested` is true), this is also used as the path of the form's state within its parent form.
      */
-    name?: N extends true ? string : never;
+    name?: string;
     /**
      * Delay in milliseconds before validating the form on input events.
      * @defaultValue `300`

package/dist/runtime/components/Form.vue

@@ -20,7 +20,7 @@ const _props = defineProps({
     return ["input", "blur", "change"];
   } },
   disabled: { type: Boolean, required: false },
-  name: { type: null, required: false },
+  name: { type: String, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
   transform: { type: null, required: false, default: () => true },
   nested: { type: Boolean, required: false },
@@ -293,6 +293,7 @@ defineExpose(api);
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
     ref="formRef"
+    :name="parentBus ? void 0 : props.name"
     method="post"
     :class="ui({ class: [props.ui?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"

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

@@ -22,10 +22,10 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     /** Disable all inputs inside the form. */
     disabled?: boolean;
     /**
-     * Path of the form's state within it's parent form.
-     * Used for nesting forms. Only available if `nested` is true.
+     * The `name` attribute of the form element.
+     * For nested forms (`nested` is true), this is also used as the path of the form's state within its parent form.
      */
-    name?: N extends true ? string : never;
+    name?: string;
     /**
      * Delay in milliseconds before validating the form on input events.
      * @defaultValue `300`

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

@@ -6,8 +6,8 @@ import type { IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 import theme from '#build/ui/input-date';
 type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
-type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
-type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
+type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
 type InputDateDefaultValue<R extends boolean = false> = R extends true ? DateRangeFieldRootProps['defaultValue'] : DateFieldRootProps['defaultValue'];
 type InputDateModelValue<R extends boolean = false> = (R extends true ? DateRangeFieldRootProps['modelValue'] : DateFieldRootProps['modelValue']) | undefined;
 export interface InputDateProps<R extends boolean = false> extends UseComponentIconsProps, _DateFieldRootProps, _RangeDateFieldRootProps {

package/dist/runtime/components/InputDate.vue

@@ -48,6 +48,7 @@ const _props = defineProps({
   hideTimeZone: { type: Boolean, required: false },
   maxValue: { type: Object, required: false },
   minValue: { type: Object, required: false },
+  locale: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   isDateUnavailable: { type: Function, required: false },

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

@@ -6,8 +6,8 @@ import type { IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 import theme from '#build/ui/input-date';
 type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
-type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
-type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
+type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
 type InputDateDefaultValue<R extends boolean = false> = R extends true ? DateRangeFieldRootProps['defaultValue'] : DateFieldRootProps['defaultValue'];
 type InputDateModelValue<R extends boolean = false> = (R extends true ? DateRangeFieldRootProps['modelValue'] : DateFieldRootProps['modelValue']) | undefined;
 export interface InputDateProps<R extends boolean = false> extends UseComponentIconsProps, _DateFieldRootProps, _RangeDateFieldRootProps {

package/dist/runtime/components/InputMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-menu";
 </script>
 
 <script setup>
-import { computed, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from "vue";
+import { computed, ref, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { Combobox, Autocomplete } from "reka-ui/namespaced";
@@ -228,7 +228,9 @@ function onFocus(event) {
   emits("focus", event);
   emitFormFocus();
 }
+const isOpen = ref(false);
 function onUpdateOpen(value) {
+  isOpen.value = value;
   let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
@@ -283,6 +285,14 @@ function onClear() {
   emits("clear");
 }
 const viewportRef = useTemplateRef("viewportRef");
+const comboboxRootRef = useTemplateRef("comboboxRootRef");
+watch(() => props.items, async () => {
+  if (!isOpen.value) {
+    return;
+  }
+  await nextTick();
+  comboboxRootRef.value?.highlightFirstItem?.();
+}, { flush: "post" });
 defineExpose({
   inputRef: toRef(() => inputRef.value?.$el),
   viewportRef: toRef(() => viewportRef.value)
@@ -361,6 +371,7 @@ defineExpose({
   </DefineItemTemplate>
 
   <Component.Root
+    ref="comboboxRootRef"
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
     :name="name"

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

@@ -11,7 +11,7 @@ type InputNumberValue = number | null;
 type ApplyModifiers<T extends InputNumberValue, Mod extends Pick<ModelModifiers, 'optional'>> = T | (Mod extends {
     optional: true;
 } ? undefined : never);
-export interface InputNumberProps<T extends InputNumberValue = InputNumberValue, Mod extends Pick<ModelModifiers, 'optional'> = Pick<ModelModifiers, 'optional'>> extends Pick<NumberFieldRootProps, 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly' | 'focusOnChange'>, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'min' | 'max' | 'readonly' | 'required' | 'step' | 'name' | 'placeholder' | 'type' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size'> {
+export interface InputNumberProps<T extends InputNumberValue = InputNumberValue, Mod extends Pick<ModelModifiers, 'optional'> = Pick<ModelModifiers, 'optional'>> extends Pick<NumberFieldRootProps, 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly' | 'focusOnChange' | 'locale'>, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'min' | 'max' | 'readonly' | 'required' | 'step' | 'name' | 'placeholder' | 'type' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

package/dist/runtime/components/InputNumber.vue

@@ -49,7 +49,8 @@ const _props = defineProps({
   disableWheelChange: { type: Boolean, required: false },
   invertWheelChange: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  focusOnChange: { type: Boolean, required: false }
+  focusOnChange: { type: Boolean, required: false },
+  locale: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
@@ -57,7 +58,7 @@ const props = useComponentProps("inputNumber", _props);
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange", "locale"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);