@nuxt/ui 4.8.1 → 4.9.0

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

@@ -11,7 +11,7 @@ type InputNumberValue = number | null;
 type ApplyModifiers<T extends InputNumberValue, Mod extends Pick<ModelModifiers, 'optional'>> = T | (Mod extends {
     optional: true;
 } ? undefined : never);
-export interface InputNumberProps<T extends InputNumberValue = InputNumberValue, Mod extends Pick<ModelModifiers, 'optional'> = Pick<ModelModifiers, 'optional'>> extends Pick<NumberFieldRootProps, 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly' | 'focusOnChange'>, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'min' | 'max' | 'readonly' | 'required' | 'step' | 'name' | 'placeholder' | 'type' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size'> {
+export interface InputNumberProps<T extends InputNumberValue = InputNumberValue, Mod extends Pick<ModelModifiers, 'optional'> = Pick<ModelModifiers, 'optional'>> extends Pick<NumberFieldRootProps, 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly' | 'focusOnChange' | 'locale'>, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'min' | 'max' | 'readonly' | 'required' | 'step' | 'name' | 'placeholder' | 'type' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

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

@@ -8,8 +8,8 @@ import type { ComponentConfig } from '../types/tv';
 type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>;
 type InputTimeDefaultValue<R extends boolean = false> = R extends true ? TimeRangeFieldRootProps['defaultValue'] : TimeFieldRootProps['defaultValue'];
 type InputTimeModelValue<R extends boolean = false> = (R extends true ? TimeRangeFieldRootProps['modelValue'] : TimeFieldRootProps['modelValue']) | undefined;
-type _TimeFieldRootProps = Omit<TimeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
-type _TimeRangeFieldRootProps = Omit<TimeRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _TimeFieldRootProps = Omit<TimeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
+type _TimeRangeFieldRootProps = Omit<TimeRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
 export interface InputTimeProps<R extends boolean = false> extends UseComponentIconsProps, _TimeFieldRootProps, _TimeRangeFieldRootProps {
     /**
      * The element or component this component should render as.

package/dist/runtime/components/InputTime.vue

@@ -49,6 +49,7 @@ const _props = defineProps({
   hideTimeZone: { type: Boolean, required: false },
   maxValue: { type: Object, required: false },
   minValue: { type: Object, required: false },
+  locale: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   id: { type: String, required: false },

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

@@ -8,8 +8,8 @@ import type { ComponentConfig } from '../types/tv';
 type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>;
 type InputTimeDefaultValue<R extends boolean = false> = R extends true ? TimeRangeFieldRootProps['defaultValue'] : TimeFieldRootProps['defaultValue'];
 type InputTimeModelValue<R extends boolean = false> = (R extends true ? TimeRangeFieldRootProps['modelValue'] : TimeFieldRootProps['modelValue']) | undefined;
-type _TimeFieldRootProps = Omit<TimeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
-type _TimeRangeFieldRootProps = Omit<TimeRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _TimeFieldRootProps = Omit<TimeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
+type _TimeRangeFieldRootProps = Omit<TimeRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
 export interface InputTimeProps<R extends boolean = false> extends UseComponentIconsProps, _TimeFieldRootProps, _TimeRangeFieldRootProps {
     /**
      * The element or component this component should render as.

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/LinkBase.d.vue.ts

@@ -4,7 +4,7 @@ export interface LinkBaseProps {
     type?: string;
     disabled?: boolean;
     onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
-    href?: string;
+    href?: string | null;
     navigate?: (e: MouseEvent) => void;
     target?: LinkProps['target'];
     rel?: LinkProps['rel'];

package/dist/runtime/components/LinkBase.vue

@@ -9,7 +9,7 @@ const props = defineProps({
   type: { type: String, required: false, default: "button" },
   disabled: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
-  href: { type: String, required: false },
+  href: { type: [String, null], required: false },
   navigate: { type: Function, required: false },
   target: { type: [String, Object, null], required: false },
   rel: { type: [String, Object, null], required: false },

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

@@ -4,7 +4,7 @@ export interface LinkBaseProps {
     type?: string;
     disabled?: boolean;
     onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>;
-    href?: string;
+    href?: string | null;
     navigate?: (e: MouseEvent) => void;
     target?: LinkProps['target'];
     rel?: LinkProps['rel'];

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

package/dist/runtime/components/PinInput.vue

@@ -22,6 +22,7 @@ const _props = defineProps({
   autofocusDelay: { type: Number, required: false, default: 0 },
   highlight: { type: Boolean, required: false },
   fixed: { type: Boolean, required: false },
+  separator: { type: [Number, Array], required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   defaultValue: { type: null, required: false },
@@ -36,6 +37,7 @@ const _props = defineProps({
   type: { type: null, required: false, default: "text" }
 });
 const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+defineSlots();
 const props = useComponentProps("pinInput", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
@@ -68,6 +70,20 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+function shouldInsertSeparator(index) {
+  if (props.separator === void 0) {
+    return false;
+  }
+  const position = index + 1;
+  if (position >= looseToNumber(props.length)) {
+    return false;
+  }
+  if (Array.isArray(props.separator)) {
+    return props.separator.includes(position);
+  }
+  const separator = looseToNumber(props.separator);
+  return Number.isInteger(separator) && separator > 0 && position % separator === 0;
+}
 onMounted(() => {
   setTimeout(() => {
     autoFocus();
@@ -91,16 +107,25 @@ defineExpose({
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >
-    <PinInputInput
-      v-for="(ids, index) in looseToNumber(props.length)"
-      :key="ids"
-      :ref="(el) => setInputRef(index, el)"
-      :index="index"
-      data-slot="base"
-      :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
+    <template v-for="(ids, index) in looseToNumber(props.length)" :key="ids">
+      <PinInputInput
+        :ref="(el) => setInputRef(index, el)"
+        :index="index"
+        data-slot="base"
+        :class="ui.base({ class: props.ui?.base })"
+        :disabled="disabled"
+        @blur="onBlur"
+        @focus="emitFormFocus"
+      />
+      <span
+        v-if="shouldInsertSeparator(index)"
+        data-slot="separator"
+        role="presentation"
+        aria-hidden="true"
+        :class="ui.separator({ class: props.ui?.separator })"
+      >
+        <slot name="separator" :index="index">•</slot>
+      </span>
+    </template>
   </PinInputRoot>
 </template>

package/dist/runtime/components/PinInput.vue.d.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>;

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

@@ -32,6 +32,8 @@ export interface PopoverProps<M extends PopoverMode = PopoverMode> extends Popov
     /**
      * The reference (or anchor) element that is being referred to for positioning.
      *
+     * Accepts an element or a virtual element (anything with `getBoundingClientRect`),
+     * and can be changed reactively to re-anchor the popover (e.g. for a guided tour).
      * If not provided will use the current component as anchor.
      */
     reference?: HoverCardTriggerProps['reference'];

package/dist/runtime/components/Popover.vue

@@ -62,7 +62,7 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 
 <template>
   <Component.Root v-slot="{ open, close }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default || !!props.reference" as-child :reference="props.reference" :class="props.class">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </Component.Trigger>
 
@@ -72,7 +72,7 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 
     <Component.Portal v-bind="portalProps">
       <FieldGroupReset>
-        <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
+        <Component.Content v-bind="contentProps" :reference="props.reference ?? props.content?.reference" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
           <slot name="content" v-bind="close ? { close } : {}" />
 
           <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />

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

@@ -32,6 +32,8 @@ export interface PopoverProps<M extends PopoverMode = PopoverMode> extends Popov
     /**
      * The reference (or anchor) element that is being referred to for positioning.
      *
+     * Accepts an element or a virtual element (anything with `getBoundingClientRect`),
+     * and can be changed reactively to re-anchor the popover (e.g. for a guided tour).
      * If not provided will use the current component as anchor.
      */
     reference?: HoverCardTriggerProps['reference'];

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

@@ -51,6 +51,14 @@ export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
      * @defaultValue false
      */
     virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    /**
+     * Display fade shadows on the scrollable edges to indicate more content.
+     * Pass an object to configure the shadow size (in px).
+     * @defaultValue false
+     */
+    shadow?: boolean | {
+        size?: number;
+    };
     class?: any;
     ui?: ScrollArea['slots'];
 }

package/dist/runtime/components/ScrollArea.vue

@@ -11,11 +11,13 @@ import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
 import { useLocale } from "../composables/useLocale";
+import { useScrollShadow } from "../composables/useScrollShadow";
 const _props = defineProps({
   as: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   items: { type: Array, required: false },
   virtualize: { type: [Boolean, Object], required: false, default: false },
+  shadow: { type: [Boolean, Object], required: false, default: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
@@ -28,6 +30,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.scrollArea ||
   orientation: props.orientation
 }));
 const rootRef = useTemplateRef("rootRef");
+const scrollShadowStyle = props.shadow ? useScrollShadow(
+  computed(() => rootRef.value?.$el),
+  {
+    orientation: () => props.orientation ?? "vertical",
+    size: typeof props.shadow === "object" ? props.shadow.size : void 0
+  }
+).style : void 0;
 const isRtl = computed(() => dir.value === "rtl");
 const isHorizontal = computed(() => props.orientation === "horizontal");
 const isVertical = computed(() => !isHorizontal.value);
@@ -164,6 +173,7 @@ defineExpose({
     data-slot="root"
     :data-orientation="props.orientation"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="scrollShadowStyle"
   >
     <template v-if="virtualizer">
       <div

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

@@ -51,6 +51,14 @@ export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
      * @defaultValue false
      */
     virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    /**
+     * Display fade shadows on the scrollable edges to indicate more content.
+     * Pass an object to configure the shadow size (in px).
+     * @defaultValue false
+     */
+    shadow?: boolean | {
+        size?: number;
+    };
     class?: any;
     ui?: ScrollArea['slots'];
 }

package/dist/runtime/components/Select.vue

@@ -81,7 +81,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {}
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
-  position: position.value
+  position: position.value,
+  multiple: props.multiple
 }));
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
@@ -145,6 +146,11 @@ function onUpdateOpen(value) {
 function isSelectItem(item) {
   return typeof item === "object" && item !== null;
 }
+function onTriggerClick(open) {
+  if (!open) {
+    triggerRef.value?.$el?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
+  }
+}
 const viewportRef = useTemplateRef("viewportRef");
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el),
@@ -173,6 +179,7 @@ defineExpose({
       data-slot="base"
       :class="ui.base({ class: [props.ui?.base, props.class] })"
       v-bind="{ ...$attrs, ...ariaAttrs }"
+      @click="onTriggerClick(open)"
     >
       <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">

package/dist/runtime/components/SelectMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/select-menu";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted, toRef, toRaw } from "vue";
+import { useTemplateRef, computed, ref, onMounted, toRef, toRaw, watch, nextTick } from "vue";
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { defu } from "defu";
@@ -119,7 +119,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu ||
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
-  virtualize: !!props.virtualize
+  virtualize: !!props.virtualize,
+  multiple: props.multiple
 }));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
@@ -199,7 +200,9 @@ function onUpdate(value) {
     searchTerm.value = "";
   }
 }
+const isOpen = ref(false);
 function onUpdateOpen(value) {
+  isOpen.value = value;
   let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
@@ -246,6 +249,14 @@ function onClear() {
   emits("clear");
 }
 const viewportRef = useTemplateRef("viewportRef");
+const comboboxRootRef = useTemplateRef("comboboxRootRef");
+watch(() => props.items, async () => {
+  if (!isOpen.value) {
+    return;
+  }
+  await nextTick();
+  comboboxRootRef.value?.highlightFirstItem?.();
+}, { flush: "post" });
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el),
   viewportRef: toRef(() => viewportRef.value)
@@ -324,9 +335,9 @@ defineExpose({
   </DefineItemTemplate>
 
   <ComboboxRoot
-    :id="id"
+    ref="comboboxRootRef"
     v-slot="{ modelValue, open }"
-    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    v-bind="rootProps"
     ignore-filter
     as-child
     :name="name"
@@ -335,7 +346,14 @@ defineExpose({
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
+      <ComboboxTrigger
+        :id="id"
+        ref="triggerRef"
+        data-slot="base"
+        :class="ui.base({ class: [props.ui?.base, props.class] })"
+        tabindex="0"
+        v-bind="{ ...$attrs, ...ariaAttrs }"
+      >
         <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">
             <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

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

@@ -58,6 +58,11 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
      * @defaultValue false
      */
     rail?: boolean;
+    /**
+     * Animate the sidebar when collapsing or expanding.
+     * @defaultValue true
+     */
+    transition?: boolean;
     /**
      * The mode of the sidebar menu on mobile.
      * @defaultValue 'slideover'

package/dist/runtime/components/Sidebar.vue

@@ -26,6 +26,7 @@ const _props = defineProps({
   close: { type: [Boolean, Object], required: false, default: false },
   closeIcon: { type: null, required: false },
   rail: { type: Boolean, required: false, default: false },
+  transition: { type: Boolean, required: false, default: true },
   mode: { type: null, required: false, default: "slideover" },
   menu: { type: null, required: false },
   class: { type: null, required: false },
@@ -83,7 +84,8 @@ const hasHeader = computed(() => !!slots.header || props.title || !!slots.title
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.sidebar || {} })({
   side: props.side,
   variant: props.variant,
-  collapsible: props.collapsible
+  collapsible: props.collapsible,
+  transition: props.transition
 }));
 const Menu = computed(() => ({
   slideover: USlideover,

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

@@ -58,6 +58,11 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
      * @defaultValue false
      */
     rail?: boolean;
+    /**
+     * Animate the sidebar when collapsing or expanding.
+     * @defaultValue true
+     */
+    transition?: boolean;
     /**
      * The mode of the sidebar menu on mobile.
      * @defaultValue 'slideover'

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

@@ -57,7 +57,9 @@ export interface SlideoverProps extends DialogRootProps {
     ui?: Slideover['slots'];
 }
 export interface SlideoverEmits extends DialogRootEmits {
+    'leave': [];
     'after:leave': [];
+    'enter': [];
     'after:enter': [];
     'close:prevent': [];
 }
@@ -87,13 +89,17 @@ export interface SlideoverSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, 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<SlideoverProps> & 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/Slideover.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("slideover", _props);
 const { t } = useLocale();
@@ -78,7 +78,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
           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"
         >