@nuxt/ui 4.11.1 → 4.11.3

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,8 +59,9 @@ 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;
-        "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
-        onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+        onFocus?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? (number | undefined)[] : string[]) => any) | undefined;
+        onComplete?: ((value: [T] extends ["number"] ? (number | undefined)[] : string[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -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 | undefined)[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? (number | undefined)[] : string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/components/PinInput.vue

@@ -36,7 +36,7 @@ const _props = defineProps({
   required: { type: Boolean, required: false },
   type: { type: null, required: false, default: "text" }
 });
-const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+const emits = defineEmits(["update:modelValue", "complete", "change", "blur", "focus"]);
 defineSlots();
 const props = useComponentProps("pinInput", _props);
 const appConfig = useAppConfig();
@@ -62,11 +62,19 @@ function onComplete(value) {
   emits("change", event);
   emitFormChange();
 }
-function onBlur(event) {
-  if (!event.relatedTarget) {
-    emits("blur", event);
-    emitFormBlur();
+function onFocusOut(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
   }
+  emits("blur", event);
+  emitFormBlur();
+}
+function onFocusIn(event) {
+  if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+    return;
+  }
+  emits("focus", event);
+  emitFormFocus();
 }
 function autoFocus() {
   if (props.autofocus) {
@@ -111,6 +119,8 @@ defineExpose({
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
+    @focusout="onFocusOut"
+    @focusin="onFocusIn"
   >
     <template v-for="(ids, index) in looseToNumber(props.length)" :key="ids">
       <PinInputInput
@@ -119,8 +129,6 @@ defineExpose({
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         :disabled="disabled"
-        @blur="onBlur"
-        @focus="emitFormFocus"
       />
       <span
         v-if="shouldInsertSeparator(index)"

package/dist/runtime/components/PinInput.vue.d.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,8 +59,9 @@ 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;
-        "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
-        onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+        onFocus?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? (number | undefined)[] : string[]) => any) | undefined;
+        onComplete?: ((value: [T] extends ["number"] ? (number | undefined)[] : string[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -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 | undefined)[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? (number | undefined)[] : string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -20,7 +20,7 @@ export interface ProgressGroupItem {
     color?: ProgressGroup['variants']['color'] | (string & {});
     slot?: string;
     class?: any;
-    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    ui?: Partial<Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>>;
     [key: string]: any;
 }
 export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {

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

@@ -20,7 +20,7 @@ export interface ProgressGroupItem {
     color?: ProgressGroup['variants']['color'] | (string & {});
     slot?: string;
     class?: any;
-    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    ui?: Partial<Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>>;
     [key: string]: any;
 }
 export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {

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

@@ -18,7 +18,7 @@ export type RadioGroupItem = RadioGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
+    ui?: Partial<Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {

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

@@ -18,7 +18,7 @@ export type RadioGroupItem = RadioGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
+    ui?: Partial<Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {

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

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

package/dist/runtime/components/Select.vue

@@ -167,6 +167,12 @@ function onTriggerClick(open) {
     triggerRef.value?.$el?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
   }
 }
+function onCloseAutoFocus(event) {
+  const activeElement = document.activeElement;
+  if (activeElement && activeElement !== document.body && !event.target.contains(activeElement)) {
+    event.preventDefault();
+  }
+}
 const viewportRef = useTemplateRef("viewportRef");
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el),
@@ -224,7 +230,7 @@ defineExpose({
 
     <SelectPortal v-bind="portalProps">
       <FieldGroupReset>
-        <SelectContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+        <SelectContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps" @close-auto-focus="onCloseAutoFocus">
           <slot name="content-top" />
 
           <component :is="isItemAligned ? SelectViewport : 'div'" ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">

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

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

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

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

package/dist/runtime/components/SelectMenu.vue

@@ -237,6 +237,14 @@ function onUpdateOpen(value) {
     clearTimeout(timeoutId);
   }
 }
+function onTriggerKeydown(e) {
+  if (isOpen.value) {
+    return;
+  }
+  const trigger = e.currentTarget;
+  e.preventDefault();
+  trigger.click();
+}
 function onCreate(e) {
   e.preventDefault();
   e.stopPropagation();
@@ -262,6 +270,9 @@ function isModelValueEmpty(modelValue) {
   return modelValue === void 0 || modelValue === null || modelValue === "";
 }
 function onClear() {
+  if (disabled.value) {
+    return;
+  }
   emits("clear");
 }
 function onMountAutoFocus(event) {
@@ -269,6 +280,12 @@ function onMountAutoFocus(event) {
     event.preventDefault();
   }
 }
+function onUnmountAutoFocus(event) {
+  const activeElement = document.activeElement;
+  if (activeElement && activeElement !== document.body && !event.target.contains(activeElement)) {
+    event.preventDefault();
+  }
+}
 const viewportRef = useTemplateRef("viewportRef");
 const comboboxRootRef = useTemplateRef("comboboxRootRef");
 watch(() => props.items, async () => {
@@ -373,7 +390,9 @@ defineExpose({
         data-slot="base"
         :class="ui.base({ class: [props.ui?.base, props.class] })"
         tabindex="0"
-        v-bind="{ ...$attrs, ...ariaAttrs }"
+        v-bind="{ 'aria-label': void 0, ...$attrs, ...ariaAttrs }"
+        @keydown.down="onTriggerKeydown"
+        @keydown.up="onTriggerKeydown"
       >
         <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
@@ -395,7 +414,7 @@ defineExpose({
 
         <span 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">
-            <ComboboxCancel v-if="!!props.clear && !isModelValueEmpty(modelValue)" as-child>
+            <ComboboxCancel v-if="!!props.clear && !disabled && !isModelValueEmpty(modelValue)" as-child>
               <UButton
                 as="span"
                 :icon="props.clearIcon || appConfig.ui.icons.close"
@@ -419,7 +438,7 @@ defineExpose({
     <ComboboxPortal v-bind="portalProps">
       <FieldGroupReset>
         <ComboboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-          <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })" @mount-auto-focus="onMountAutoFocus">
+          <FocusScope loop data-slot="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })" @mount-auto-focus="onMountAutoFocus" @unmount-auto-focus="onUnmountAutoFocus">
             <slot name="content-top" />
 
             <ComboboxInput v-if="!!props.searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>

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

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

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

@@ -12,7 +12,7 @@ export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'>
     id?: string;
     slot?: string;
     class?: any;
-    ui?: Pick<Splitter['slots'], 'panel'>;
+    ui?: Partial<Pick<Splitter['slots'], 'panel'>>;
     [key: string]: any;
 }
 export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {

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

@@ -12,7 +12,7 @@ export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'>
     id?: string;
     slot?: string;
     class?: any;
-    ui?: Pick<Splitter['slots'], 'panel'>;
+    ui?: Partial<Pick<Splitter['slots'], 'panel'>>;
     [key: string]: any;
 }
 export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {