@nuxt/ui 4.11.1 → 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.1",
+  "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.DCJ9twx8.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.1";
+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'> {

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'> {

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];

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/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" />

package/dist/runtime/components/LinkBase.vue

@@ -22,14 +22,16 @@ function onClickWrapper(e) {
     e.preventDefault();
     return;
   }
+  const results = [];
   if (props.onClick) {
     for (const onClick of Array.isArray(props.onClick) ? props.onClick : [props.onClick]) {
-      onClick(e);
+      results.push(onClick(e));
     }
   }
   if (props.href && props.navigate && !props.isExternal) {
     props.navigate(e);
   }
+  return Promise.all(results);
 }
 </script>
 

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

@@ -27,7 +27,7 @@ export interface ListboxItem {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 }
 export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Pick<ListboxRootProps, 'by' | 'disabled' | 'highlightOnHover' | 'name' | 'orientation' | 'required' | 'selectionBehavior'> {

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

@@ -27,7 +27,7 @@ export interface ListboxItem {
     disabled?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>>;
     [key: string]: any;
 }
 export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Pick<ListboxRootProps, 'by' | 'disabled' | 'highlightOnHover' | 'name' | 'orientation' | 'required' | 'selectionBehavior'> {

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

@@ -67,7 +67,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     open?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLeadingChipSize' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
+    ui?: Partial<Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLeadingChipSize' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>>;
     [key: string]: any;
 }
 type SingleOrMultipleType = 'single' | 'multiple';

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

@@ -67,7 +67,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     open?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLeadingChipSize' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
+    ui?: Partial<Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLeadingChipSize' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>>;
     [key: string]: any;
 }
 type SingleOrMultipleType = 'single' | 'multiple';

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

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

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

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

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

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

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

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

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

@@ -46,6 +46,7 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
 export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T> & {
     change: [event: Event];
     blur: [event: Event];
+    focus: [event: Event];
 };
 export interface PinInputSlots {
     separator?(props: {
@@ -58,6 +59,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
     props: import("vue").PublicProps & __VLS_PrettifyLocal<PinInputProps<T> & {
         onBlur?: ((event: Event) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onFocus?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
         onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -68,7 +70,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
     }>) => void;
     attrs: any;
     slots: PinInputSlots;
-    emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
+    emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };