@nuxt/ui 4.8.2 → 4.9.0

package/dist/runtime/components/ChatMessages.vue

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

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

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

package/dist/runtime/components/ChatPrompt.vue

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

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

@@ -7,11 +7,11 @@ type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubm
 export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
     status?: ChatStatus;
     /**
-     * The icon displayed in the button when the status is `ready`.
+     * The icon displayed in the button when the status is `ready`. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.arrowUp
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The color of the button when the status is `ready`.
      * @defaultValue 'primary'

package/dist/runtime/components/ChatPromptSubmit.vue

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

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

@@ -7,11 +7,11 @@ type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubm
 export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
     status?: ChatStatus;
     /**
-     * The icon displayed in the button when the status is `ready`.
+     * The icon displayed in the button when the status is `ready`. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.arrowUp
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The color of the button when the status is `ready`.
      * @defaultValue 'primary'

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

@@ -64,11 +64,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      */
     size?: CommandPalette['variants']['size'];
     /**
-     * The icon displayed in the input.
+     * The icon displayed in the input. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The icon displayed on the right side of the input.
      * @defaultValue appConfig.ui.icons.search

package/dist/runtime/components/CommandPalette.vue

@@ -29,7 +29,7 @@ defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   trailingIcon: { type: null, required: false },
   selectedIcon: { type: null, required: false },
   childrenIcon: { type: null, required: false },
@@ -199,7 +199,13 @@ const filteredItems = computed(() => filteredGroups.value.flatMap((group) => gro
 const rootRef = useTemplateRef("rootRef");
 watch(filteredGroups, () => {
   nextTick(() => {
-    rootRef.value?.highlightFirstItem();
+    const root = rootRef.value;
+    const rootEl = root?.$el;
+    if (rootEl?.contains(document.activeElement)) {
+      root?.highlightFirstItem();
+    } else {
+      root?.highlightSelected(void 0, false);
+    }
   });
 });
 function navigate(item) {
@@ -317,13 +323,13 @@ function onSelect(e, item) {
       <UInput
         variant="none"
         :size="props.size"
-        v-bind="typeof props.input === 'object' ? props.input : {}"
         :placeholder="placeholder"
         :autofocus="props.autofocus"
         :loading="props.loading"
         :loading-icon="props.loadingIcon"
         :trailing-icon="props.trailingIcon"
-        :icon="props.icon || appConfig.ui.icons.search"
+        :icon="props.icon === false ? void 0 : props.icon ?? appConfig.ui.icons.search"
+        v-bind="typeof props.input === 'object' ? props.input : {}"
         data-slot="input"
         :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"

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

@@ -64,11 +64,11 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      */
     size?: CommandPalette['variants']['size'];
     /**
-     * The icon displayed in the input.
+     * The icon displayed in the input. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The icon displayed on the right side of the input.
      * @defaultValue appConfig.ui.icons.search

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

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

package/dist/runtime/components/DashboardSearch.vue

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

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

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

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

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

package/dist/runtime/components/DashboardSearchButton.vue

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

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

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

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

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

package/dist/runtime/components/FileUpload.vue

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

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

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

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

@@ -104,6 +104,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkPr
     as: any;
     active: boolean;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    locale: boolean | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Link.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   inactiveClass: { type: String, required: false },
   custom: { type: Boolean, required: false },
   raw: { type: Boolean, required: false },
-  locale: { type: [Boolean, String], required: false },
+  locale: { type: [Boolean, String], required: false, default: void 0 },
   class: { type: null, required: false },
   to: { type: null, required: false },
   href: { type: null, required: false },

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

@@ -104,6 +104,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkPr
     as: any;
     active: boolean;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    locale: boolean | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -57,7 +57,9 @@ export interface ModalProps extends DialogRootProps {
     ui?: Modal['slots'];
 }
 export interface ModalEmits extends DialogRootEmits {
+    'leave': [];
     'after:leave': [];
+    'enter': [];
     'after:enter': [];
     'close:prevent': [];
 }
@@ -87,13 +89,17 @@ export interface ModalSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    enter: () => any;
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
+    leave: () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
 }, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
+    onEnter?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
+    onLeave?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {

package/dist/runtime/components/Modal.vue

@@ -33,7 +33,7 @@ const _props = defineProps({
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
+const emits = defineEmits(["leave", "after:leave", "enter", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("modal", _props);
 const { t } = useLocale();
@@ -72,7 +72,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
         data-slot="content"
         :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
         v-bind="contentProps"
+        @enter="emits('enter')"
         @after-enter="emits('after:enter')"
+        @leave="emits('leave')"
         @after-leave="emits('after:leave')"
         v-on="contentEvents"
       >

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

@@ -57,7 +57,9 @@ export interface ModalProps extends DialogRootProps {
     ui?: Modal['slots'];
 }
 export interface ModalEmits extends DialogRootEmits {
+    'leave': [];
     'after:leave': [];
+    'enter': [];
     'after:enter': [];
     'close:prevent': [];
 }
@@ -87,13 +89,17 @@ export interface ModalSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    enter: () => any;
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
+    leave: () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
 }, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
+    onEnter?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
+    onLeave?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {

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

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pin-input';
@@ -33,6 +33,13 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     highlight?: boolean;
     /** Keep the mobile text size on all breakpoints. */
     fixed?: boolean;
+    /**
+     * Group inputs by inserting a separator between them.
+     * Pass a number to insert one after every Nth input, or an array of positions to insert after specific inputs.
+     * @example 3 // after every 3rd input → [X][X][X] • [X][X][X]
+     * @example [3, 4] // after the 3rd and 4th inputs → [X][X][X] • [X] • [X][X][X]
+     */
+    separator?: number | number[];
     class?: any;
     ui?: PinInput['slots'];
 }
@@ -40,6 +47,11 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [event: Event];
     blur: [event: Event];
 };
+export interface PinInputSlots {
+    separator?(props: {
+        index: number;
+    }): VNode[];
+}
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -55,7 +67,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
         inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
-    slots: {};
+    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);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;