@nuxt/ui 4.11.0 → 4.11.2

package/README.md

@@ -1,7 +1,7 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5">
-  <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
-  <img alt="Nuxt UI" width="830" height="436" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/banner-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset=".github/assets/banner-light.png">
+  <img alt="Nuxt UI" width="900" height="472" src=".github/assets/banner-light.png">
 </picture>
 
 # Nuxt UI

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.11.0",
+  "version": "4.11.2",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, c as getDefaultConfig, g as getClientBundleIcons, f as publicComposables, a as addTemplates } from './shared/ui.DNq7CNkE.mjs';
+import { d as defaultOptions, r as resolveColors, c as getDefaultConfig, g as getClientBundleIcons, f as publicComposables, a as addTemplates } from './shared/ui.oNygBd3N.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -14,7 +14,7 @@ import 'tinyglobby';
 import 'mlly';
 
 const name = "@nuxt/ui";
-const version = "4.11.0";
+const version = "4.11.2";
 
 const module$1 = defineNuxtModule({
   meta: {

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

@@ -27,7 +27,7 @@ export interface AccordionItem {
     value?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
+    ui?: Partial<Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>>;
     [key: string]: any;
 }
 export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {

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

@@ -27,7 +27,7 @@ export interface AccordionItem {
     value?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
+    ui?: Partial<Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>>;
     [key: string]: any;
 }
 export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {

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

@@ -16,7 +16,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
     avatar?: AvatarProps;
     slot?: string;
     class?: any;
-    ui?: Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>;
+    ui?: Partial<Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>>;
     [key: string]: any;
 }
 export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {

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

@@ -16,7 +16,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
     avatar?: AvatarProps;
     slot?: string;
     class?: any;
-    ui?: Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>;
+    ui?: Partial<Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>>;
     [key: string]: any;
 }
 export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {

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

@@ -17,7 +17,7 @@ type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
 export type CarouselValue = AcceptableValue;
 export type CarouselItem = CarouselValue | {
     class?: any;
-    ui?: Pick<Carousel['slots'], 'item'>;
+    ui?: Partial<Pick<Carousel['slots'], 'item'>>;
     [key: string]: any;
 };
 export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
@@ -66,32 +66,32 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
     items?: T[];
     /**
      * Enable Autoplay plugin
-     * @see https://www.embla-carousel.com/plugins/autoplay/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/autoplay
      */
     autoplay?: boolean | AutoplayOptionsType;
     /**
      * Enable Auto Scroll plugin
-     * @see https://www.embla-carousel.com/plugins/auto-scroll/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/auto-scroll
      */
     autoScroll?: boolean | AutoScrollOptionsType;
     /**
      * Enable Auto Height plugin
-     * @see https://www.embla-carousel.com/plugins/auto-height/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/auto-height
      */
     autoHeight?: boolean | AutoHeightOptionsType;
     /**
      * Enable Class Names plugin
-     * @see https://www.embla-carousel.com/plugins/class-names/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/class-names
      */
     classNames?: boolean | ClassNamesOptionsType;
     /**
      * Enable Fade plugin
-     * @see https://www.embla-carousel.com/plugins/fade/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/fade
      */
     fade?: boolean | FadeOptionsType;
     /**
      * Enable Wheel Gestures plugin
-     * @see https://www.embla-carousel.com/plugins/wheel-gestures/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/wheel-gestures
      */
     wheelGestures?: boolean | WheelGesturesPluginOptions;
     class?: any;

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

@@ -17,7 +17,7 @@ type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
 export type CarouselValue = AcceptableValue;
 export type CarouselItem = CarouselValue | {
     class?: any;
-    ui?: Pick<Carousel['slots'], 'item'>;
+    ui?: Partial<Pick<Carousel['slots'], 'item'>>;
     [key: string]: any;
 };
 export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
@@ -66,32 +66,32 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
     items?: T[];
     /**
      * Enable Autoplay plugin
-     * @see https://www.embla-carousel.com/plugins/autoplay/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/autoplay
      */
     autoplay?: boolean | AutoplayOptionsType;
     /**
      * Enable Auto Scroll plugin
-     * @see https://www.embla-carousel.com/plugins/auto-scroll/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/auto-scroll
      */
     autoScroll?: boolean | AutoScrollOptionsType;
     /**
      * Enable Auto Height plugin
-     * @see https://www.embla-carousel.com/plugins/auto-height/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/auto-height
      */
     autoHeight?: boolean | AutoHeightOptionsType;
     /**
      * Enable Class Names plugin
-     * @see https://www.embla-carousel.com/plugins/class-names/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/class-names
      */
     classNames?: boolean | ClassNamesOptionsType;
     /**
      * Enable Fade plugin
-     * @see https://www.embla-carousel.com/plugins/fade/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/fade
      */
     fade?: boolean | FadeOptionsType;
     /**
      * Enable Wheel Gestures plugin
-     * @see https://www.embla-carousel.com/plugins/wheel-gestures/
+     * @see https://www.embla-carousel.com/docs/v8/plugins/wheel-gestures
      */
     wheelGestures?: boolean | WheelGesturesPluginOptions;
     class?: any;

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

@@ -39,12 +39,12 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
      * The `user` messages props.
      * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
      */
-    user?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
+    user?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui' | 'color'>;
     /**
      * The `assistant` messages props.
      * `{ side: 'left', variant: 'naked' }`{lang="ts-type"}
      */
-    assistant?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
+    assistant?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui' | 'color'>;
     /**
      * Render the messages in a compact style.
      * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.

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

@@ -39,12 +39,12 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
      * The `user` messages props.
      * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
      */
-    user?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
+    user?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui' | 'color'>;
     /**
      * The `assistant` messages props.
      * `{ side: 'left', variant: 'naked' }`{lang="ts-type"}
      */
-    assistant?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
+    assistant?: Pick<PropsBase<T>, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui' | 'color'>;
     /**
      * Render the messages in a compact style.
      * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.

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

@@ -19,7 +19,7 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
+    ui?: Partial<Pick<CheckboxGroup['slots'], 'item'>> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;
 };
 export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'highlight' | 'indicator' | 'icon'> {

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

@@ -19,7 +19,7 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
+    ui?: Partial<Pick<CheckboxGroup['slots'], 'item'>> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;
 };
 export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'highlight' | 'indicator' | 'icon'> {

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

@@ -37,7 +37,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     children?: CommandPaletteItem[];
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>>;
     [key: string]: any;
 }
 export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {

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

@@ -37,7 +37,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     children?: CommandPaletteItem[];
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>>;
     [key: string]: any;
 }
 export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {

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

@@ -37,7 +37,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>> extends Omit<ContextMenuRootProps, 'dir'> {

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

@@ -37,7 +37,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>> extends Omit<ContextMenuRootProps, 'dir'> {

package/dist/runtime/components/DashboardNavbar.vue

@@ -52,7 +52,7 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.dashboardNavbar |
           <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <h1 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ props.title }}
           </slot>

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

@@ -41,7 +41,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {

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

@@ -41,7 +41,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {

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

@@ -12,7 +12,7 @@ export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+    ui?: Partial<Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>>;
 }
 export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
     label: string;

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

@@ -12,7 +12,7 @@ export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+    ui?: Partial<Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>>;
 }
 export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
     label: string;

package/dist/runtime/components/Form.vue

@@ -273,7 +273,7 @@ const api = {
     ) : [];
     const nestedErrors = [];
     for (const form of nestedForms.value.values()) {
-      if (matchesTarget(name, form.name)) form.api.clear();
+      if (matchesTarget(name, form.name)) form.api.clear(name instanceof RegExp ? void 0 : getNestedTarget(name, form.name || ""));
       nestedErrors.push(...getFormErrors(form));
     }
     errors.value = [...localErrors, ...nestedErrors];
@@ -294,7 +294,7 @@ defineExpose(api);
     :id="formId"
     ref="formRef"
     :name="parentBus ? void 0 : props.name"
-    method="post"
+    :method="parentBus ? void 0 : 'post'"
     :class="ui({ class: [props.ui?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"
   >

package/dist/runtime/components/Input.vue

@@ -11,7 +11,7 @@ import { useComponentProps } from "../composables/useComponentProps";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
+import { isEmpty, looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -78,11 +78,11 @@ function updateInput(value) {
   if (props.modelModifiers?.number || props.type === "number") {
     value = looseToNumber(value);
   }
-  if (props.modelModifiers?.nullable) {
-    value ||= null;
+  if (props.modelModifiers?.nullable && isEmpty(value)) {
+    value = null;
   }
-  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
-    value ||= void 0;
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null && isEmpty(value)) {
+    value = void 0;
   }
   modelValue.value = value;
   emitFormInput();

package/dist/runtime/components/InputDate.vue

@@ -90,13 +90,19 @@ function onUpdate(value) {
   emitFormChange();
   emitFormInput();
 }
-function onBlur(event) {
-  emitFormBlur();
+function onFocusOut(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
+  }
   emits("blur", event);
+  emitFormBlur();
 }
-function onFocus(event) {
-  emitFormFocus();
+function onFocusIn(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
+  }
   emits("focus", event);
+  emitFormFocus();
 }
 function autoFocus() {
   if (props.autofocus) {
@@ -143,8 +149,8 @@ defineExpose({
     :disabled="disabled"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
-    @blur="onBlur"
-    @focus="onFocus"
+    @focusout="onFocusOut"
+    @focusin="onFocusIn"
   >
     <template v-if="Array.isArray(segments)">
       <ReuseSegmentsTemplate :segments="segments" />

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

@@ -31,7 +31,7 @@ export type InputMenuItem = InputMenuValue | {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 };
 type ExcludeItem = {

package/dist/runtime/components/InputMenu.vue

@@ -89,12 +89,13 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const { filterGroups } = useFilter();
 const isAutocomplete = computed(() => props.mode === "autocomplete");
+const isMultiple = computed(() => !!props.multiple && !isAutocomplete.value);
 const rootPropsPick = reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "openOnClick", "openOnFocus", "by");
 const rootPropsOmitted = reactiveOmit(rootPropsPick, "multiple", "resetSearchTermOnSelect", "resetModelValueOnClear", "by");
 const rootProps = useForwardProps(computed(() => isAutocomplete.value ? rootPropsOmitted : rootPropsPick), emits);
 const Component = computed(() => isAutocomplete.value ? Autocomplete : Combobox);
 const attrs = useAttrs();
-const baseDataSlot = computed(() => props.multiple && !isAutocomplete.value ? attrs["data-slot"] ?? "base" : "base");
+const baseDataSlot = computed(() => isMultiple.value ? attrs["data-slot"] ?? "base" : "base");
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
@@ -142,7 +143,7 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputMenu || {} }
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  multiple: props.multiple,
+  multiple: isMultiple.value,
   fieldGroup: orientation.value,
   virtualize: !!props.virtualize
 }));
@@ -298,8 +299,17 @@ function isModelValueEmpty(modelValue) {
   return modelValue === void 0 || modelValue === null || modelValue === "";
 }
 function onClear() {
+  if (disabled.value) {
+    return;
+  }
   emits("clear");
 }
+function onTagsInputKeydown(event) {
+  if (event.isComposing || !searchTerm.value) {
+    return;
+  }
+  event.preventDefault();
+}
 const viewportRef = useTemplateRef("viewportRef");
 const comboboxRootRef = useTemplateRef("comboboxRootRef");
 watch(() => props.items, async () => {
@@ -394,14 +404,14 @@ defineExpose({
     :disabled="disabled"
     :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :as-child="!!props.multiple && !isAutocomplete"
+    :as-child="isMultiple"
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <Component.Anchor :as-child="!props.multiple" :data-slot="baseDataSlot" :class="ui.base({ class: props.ui?.base })">
+    <Component.Anchor :as-child="!isMultiple" :data-slot="baseDataSlot" :class="ui.base({ class: props.ui?.base })">
       <TagsInputRoot
-        v-if="props.multiple && !isAutocomplete"
+        v-if="isMultiple"
         v-slot="{ modelValue: tags }"
         :model-value="modelValue"
         :disabled="disabled"
@@ -435,6 +445,7 @@ defineExpose({
             data-slot="tagsInput"
             :class="ui.tagsInput({ class: props.ui?.tagsInput })"
             @change.stop
+            @keydown.enter="onTagsInputKeydown"
           />
         </Component.Input>
       </TagsInputRoot>
@@ -444,7 +455,7 @@ defineExpose({
         :id="id"
         ref="inputRef"
         v-bind="{ ...!isAutocomplete ? { displayValue } : {}, ...$attrs, ...ariaAttrs }"
-        :data-slot="props.multiple ? void 0 : 'base'"
+        data-slot="base"
         :type="props.type"
         :placeholder="props.placeholder"
         :required="props.required"
@@ -463,7 +474,7 @@ defineExpose({
 
       <Component.Trigger v-if="isTrailing || !!slots.trailing || !!props.clear" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
         <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
-          <Component.Cancel v-if="!!props.clear && !isModelValueEmpty(modelValue)" as-child>
+          <Component.Cancel v-if="!!props.clear && !disabled && !isModelValueEmpty(modelValue)" as-child>
             <UButton
               as="span"
               :icon="props.clearIcon || appConfig.ui.icons.close"

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

@@ -31,7 +31,7 @@ export type InputMenuItem = InputMenuValue | {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 };
 type ExcludeItem = {

package/dist/runtime/components/InputNumber.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/input-number";
 import { onMounted, onScopeDispose, computed, useTemplateRef, toRef } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
-import { reactivePick, useVModel } from "@vueuse/core";
+import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useFieldGroup } from "../composables/useFieldGroup";
@@ -55,10 +55,9 @@ const _props = defineProps({
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
 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", "locale"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange", "locale"));
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color: formFieldColor, size: formFieldSize, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const color = computed(() => formFieldColor.value ?? props.color);
@@ -81,8 +80,12 @@ const decrementIcon = computed(() => props.decrementIcon || (props.orientation =
 const inputRef = useTemplateRef("inputRef");
 function onUpdate(value) {
   if (props.modelModifiers?.optional) {
-    modelValue.value = value = value ?? void 0;
+    value = value ?? void 0;
   }
+  if (value === props.modelValue || value == null && props.modelValue == null) {
+    return;
+  }
+  emits("update:modelValue", value);
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();
@@ -114,7 +117,7 @@ defineExpose({
     v-bind="rootProps"
     :id="id"
     :default-value="props.defaultValue"
-    :model-value="modelValue"
+    :model-value="props.modelValue"
     :min="props.min"
     :max="props.max"
     :step="props.step"

package/dist/runtime/components/InputTime.vue

@@ -93,13 +93,19 @@ function onUpdate(value) {
   emitFormChange();
   emitFormInput();
 }
-function onBlur(event) {
-  emitFormBlur();
+function onFocusOut(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
+  }
   emits("blur", event);
+  emitFormBlur();
 }
-function onFocus(event) {
-  emitFormFocus();
+function onFocusIn(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
+  }
   emits("focus", event);
+  emitFormFocus();
 }
 function autoFocus() {
   if (props.autofocus) {
@@ -145,8 +151,8 @@ defineExpose({
     :default-value="props.defaultValue"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
-    @blur="onBlur"
-    @focus="onFocus"
+    @focusout="onFocusOut"
+    @focusin="onFocusIn"
   >
     <template v-if="Array.isArray(segments)">
       <ReuseSegmentsTemplate :segments="segments" />