@nuxt/ui 4.11.0 → 4.11.2

package/dist/runtime/components/Link.vue

@@ -3,16 +3,17 @@ import theme from "#build/ui/link";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, getCurrentInstance, mergeProps, onMounted, onBeforeUnmount } from "vue";
 import { isEqual } from "ohash/utils";
 import { useForwardProps, Slot } from "reka-ui";
 import { defu } from "defu";
 import { hasProtocol } from "ufo";
 import { reactiveOmit } from "@vueuse/core";
-import { useRoute, useAppConfig, useNuxtApp } from "#imports";
+import { useRoute, useAppConfig, useNuxtApp, onNuxtReady } from "#imports";
 import { mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
 import { isPartiallyEqual } from "../utils/link";
+import { requestIdleCallback, cancelIdleCallback, observeIntersection } from "../utils/prefetch";
 import ULinkBase from "./LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -126,13 +127,63 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive } = {}) {
   }
   return false;
 }
-function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
+function resolveLinkClass({ route: route2, isActive, isExactActive, prefetched } = {}) {
   const active = isLinkActive({ route: route2, isActive, isExactActive });
+  const prefetchedClass = prefetched ? props.prefetchedClass : void 0;
   if (props.raw) {
-    return [props.class, active ? props.activeClass : props.inactiveClass];
+    return [props.class, active ? props.activeClass : props.inactiveClass, prefetchedClass];
   }
-  return ui.value({ class: props.class, active, disabled: props.disabled });
+  return ui.value({ class: prefetchedClass ? [props.class, prefetchedClass] : props.class, active, disabled: props.disabled });
 }
+const instance = getCurrentInstance();
+let prefetchApi;
+function onPrefetch() {
+  prefetchApi?.prefetch?.(nuxtApp);
+}
+function getPrefetchListeners({ prefetch, shouldPrefetch }, attrs) {
+  if (!prefetch || !shouldPrefetch) {
+    return void 0;
+  }
+  prefetchApi = { prefetch, shouldPrefetch };
+  if (!shouldPrefetch("interaction")) {
+    return void 0;
+  }
+  return mergeProps(
+    { onPointerenter: attrs.onPointerenter, onFocus: attrs.onFocus },
+    { onPointerenter: onPrefetch, onFocus: onPrefetch }
+  );
+}
+let idleId;
+let unobserve = null;
+let unmounted = false;
+onMounted(() => {
+  if (!prefetchApi?.shouldPrefetch?.("visibility")) {
+    return;
+  }
+  const root = instance?.proxy?.$el;
+  const el = root instanceof Element ? root : root?.nextElementSibling;
+  if (!el) {
+    return;
+  }
+  onNuxtReady(() => {
+    if (unmounted) {
+      return;
+    }
+    idleId = requestIdleCallback(() => {
+      unobserve = observeIntersection(el, () => {
+        unobserve?.();
+        unobserve = null;
+        onPrefetch();
+      });
+    });
+  });
+});
+onBeforeUnmount(() => {
+  unmounted = true;
+  cancelIdleCallback(idleId);
+  unobserve?.();
+  unobserve = null;
+});
 </script>
 
 <template>
@@ -142,6 +193,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
         v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  ...rest.prefetched && prefetchedClass ? { class: prefetchedClass } : {},
+  ...getPrefetchListeners(rest, $attrs),
   as,
   type,
   disabled,
@@ -166,9 +219,10 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   navigate,
   rel,
   target: rest.target,
-  isExternal: rest.isExternal
+  isExternal: rest.isExternal,
+  ...getPrefetchListeners(rest, $attrs)
 }"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive, prefetched: rest.prefetched })"
     >
       <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>

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

@@ -106,13 +106,13 @@ function getAccordionDefaultValue(list, level = 0, listIndex = 0) {
   }, []);
   return props.type === "single" ? indexes[0] : indexes;
 }
-function onLinkTrailingClick(e, item) {
+function onLinkTrailingClick(e, item, trailingTrigger) {
   if (!item.children?.length) {
     return;
   }
   if (props.orientation === "horizontal") {
     e.preventDefault();
-  } else if (props.orientation === "vertical" && !props.collapsed) {
+  } else if (props.orientation === "vertical" && !props.collapsed && trailingTrigger) {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -120,7 +120,7 @@ function onLinkTrailingClick(e, item) {
 </script>
 
 <template>
-  <DefineLinkTemplate v-slot="{ item, active, index }">
+  <DefineLinkTemplate v-slot="{ item, active, index, trailingTrigger }">
     <slot :name="item.slot || 'item'" :item="item" :index="index" :active="active" :ui="ui">
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index" :ui="ui">
         <UAvatar v-if="item.avatar" :size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
@@ -149,12 +149,12 @@ function onLinkTrailingClick(e, item) {
       </span>
 
       <component
-        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
+        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed && trailingTrigger ? AccordionTrigger : 'span'"
         v-if="item.badge || item.badge === 0 || props.orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || props.orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
-        :as="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? 'span' : void 0"
+        :as="props.orientation === 'vertical' && item.children?.length && !props.collapsed && trailingTrigger ? 'span' : void 0"
         data-slot="linkTrailing"
         :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
-        @click="(e) => onLinkTrailingClick(e, item)"
+        @click="(e) => onLinkTrailingClick(e, item, trailingTrigger)"
       >
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index" :ui="ui">
           <UBadge
@@ -182,7 +182,7 @@ function onLinkTrailingClick(e, item) {
       :value="getItemValue(item, index, level, listIndex)"
     >
       <div v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
-        <ReuseLinkTemplate :item="item" :index="index" />
+        <ReuseLinkTemplate :item="item" :index="index" :trailing-trigger="true" />
       </div>
       <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="props.orientation === 'vertical' && item.children?.length && !props.collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)" custom>
         <component
@@ -194,7 +194,7 @@ function onLinkTrailingClick(e, item) {
         >
           <UPopover v-if="props.orientation === 'vertical' && props.collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...typeof item.popover === 'boolean' ? {} : item.popover || {} }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
             <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
-              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" :trailing-trigger="!!slotProps.href" />
             </ULinkBase>
 
             <template #content="{ close }">
@@ -231,11 +231,11 @@ function onLinkTrailingClick(e, item) {
           </UPopover>
           <UTooltip v-else-if="props.orientation === 'vertical' && props.collapsed && (!!props.tooltip || !!item.tooltip) || props.orientation === 'horizontal' && !!item.tooltip" :text="get(item, props.labelKey)" v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }">
             <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
-              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" :trailing-trigger="!!slotProps.href" />
             </ULinkBase>
           </UTooltip>
           <ULinkBase v-else v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: props.orientation === 'horizontal' || level > 0 })">
-            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" :trailing-trigger="!!slotProps.href" />
           </ULinkBase>
         </component>
 

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

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,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>>;
 };

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 = {
@@ -105,6 +105,8 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
     class?: any;

package/dist/runtime/components/Select.vue

@@ -40,6 +40,7 @@ const _props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
   class: { type: null, required: false },
@@ -90,6 +91,7 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.select || {} })({
   size: size.value,
   loading: props.loading,
   highlight: highlight.value,
+  fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,

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 = {
@@ -105,6 +105,8 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
     class?: any;

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 = {
@@ -47,6 +47,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * Whether to display the search input or not.
      * Can be an object to pass additional props to the input.
      * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * Set `autofocus: false` to prevent the search input from being focused when the menu opens (e.g. to avoid opening the virtual keyboard on touch devices).
      * @defaultValue true
      */
     searchInput?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
@@ -145,6 +146,8 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     /**
      * Determines if custom user input that does not exist in options can be added.
      * @defaultValue false

package/dist/runtime/components/SelectMenu.vue

@@ -50,6 +50,7 @@ const _props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
   filterFields: { type: Array, required: false },
   ignoreFilter: { type: Boolean, required: false },
@@ -92,7 +93,7 @@ const virtualizerProps = toRef(() => {
     estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
-const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none" }));
+const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none", fixed: props.fixed }));
 const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
@@ -127,6 +128,7 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.selectMenu || {}
   size: size.value,
   loading: props.loading,
   highlight: highlight.value,
+  fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
@@ -235,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();
@@ -260,8 +270,16 @@ function isModelValueEmpty(modelValue) {
   return modelValue === void 0 || modelValue === null || modelValue === "";
 }
 function onClear() {
+  if (disabled.value) {
+    return;
+  }
   emits("clear");
 }
+function onMountAutoFocus(event) {
+  if (searchInputProps.value.autofocus === false) {
+    event.preventDefault();
+  }
+}
 const viewportRef = useTemplateRef("viewportRef");
 const comboboxRootRef = useTemplateRef("comboboxRootRef");
 watch(() => props.items, async () => {
@@ -366,7 +384,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">
@@ -388,7 +408,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"
@@ -412,7 +432,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 })">
+          <FocusScope trapped data-slot="focusScope" :class="ui.focusScope({ class: props.ui?.focusScope })" @mount-auto-focus="onMountAutoFocus">
             <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 = {
@@ -47,6 +47,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * Whether to display the search input or not.
      * Can be an object to pass additional props to the input.
      * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * Set `autofocus: false` to prevent the search input from being focused when the menu opens (e.g. to avoid opening the virtual keyboard on touch devices).
      * @defaultValue true
      */
     searchInput?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
@@ -145,6 +146,8 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     /**
      * Determines if custom user input that does not exist in options can be added.
      * @defaultValue false