@nuxt/ui 4.8.1 → 4.8.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, g as getDefaultConfig, p as publicComposables, a as addTemplates } from './shared/ui.BzjkAvk7.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultConfig, p as publicComposables, a as addTemplates } from './shared/ui.C-lVg1QQ.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.8.1";
+const version = "4.8.2";
 
 const module$1 = defineNuxtModule({
   meta: {

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

@@ -8,8 +8,8 @@ import type { ComponentConfig } from '../types/tv';
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>;
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
 type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? (DateRange | null) : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
-type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
-type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
 export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
     /**
      * The element or component this component should render as.

package/dist/runtime/components/Calendar.vue

@@ -47,6 +47,7 @@ const _props = defineProps({
   fixedWeeks: { type: Boolean, required: false, default: true },
   maxValue: { type: Object, required: false },
   minValue: { type: Object, required: false },
+  locale: { type: String, required: false },
   numberOfMonths: { type: Number, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
@@ -146,7 +147,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
               data-slot="cellWeek"
               :class="ui.cellWeek({ class: props.ui?.cellWeek })"
             >
-              {{ getWeekNumber(weekDates[0], locale.code) }}
+              {{ getWeekNumber(weekDates[0], props.locale ?? locale.code) }}
             </td>
             <Calendar.Cell
               v-for="weekDate in weekDates"

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

@@ -8,8 +8,8 @@ import type { ComponentConfig } from '../types/tv';
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>;
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
 type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? (DateRange | null) : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
-type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
-type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'calendarLabel' | 'multiple'>;
 export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
     /**
      * The element or component this component should render as.

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

@@ -22,10 +22,10 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     /** Disable all inputs inside the form. */
     disabled?: boolean;
     /**
-     * Path of the form's state within it's parent form.
-     * Used for nesting forms. Only available if `nested` is true.
+     * The `name` attribute of the form element.
+     * For nested forms (`nested` is true), this is also used as the path of the form's state within its parent form.
      */
-    name?: N extends true ? string : never;
+    name?: string;
     /**
      * Delay in milliseconds before validating the form on input events.
      * @defaultValue `300`

package/dist/runtime/components/Form.vue

@@ -20,7 +20,7 @@ const _props = defineProps({
     return ["input", "blur", "change"];
   } },
   disabled: { type: Boolean, required: false },
-  name: { type: null, required: false },
+  name: { type: String, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
   transform: { type: null, required: false, default: () => true },
   nested: { type: Boolean, required: false },
@@ -293,6 +293,7 @@ defineExpose(api);
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
     ref="formRef"
+    :name="parentBus ? void 0 : props.name"
     method="post"
     :class="ui({ class: [props.ui?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"

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

@@ -22,10 +22,10 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     /** Disable all inputs inside the form. */
     disabled?: boolean;
     /**
-     * Path of the form's state within it's parent form.
-     * Used for nesting forms. Only available if `nested` is true.
+     * The `name` attribute of the form element.
+     * For nested forms (`nested` is true), this is also used as the path of the form's state within its parent form.
      */
-    name?: N extends true ? string : never;
+    name?: string;
     /**
      * Delay in milliseconds before validating the form on input events.
      * @defaultValue `300`

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

@@ -6,8 +6,8 @@ import type { IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 import theme from '#build/ui/input-date';
 type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
-type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
-type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
+type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
 type InputDateDefaultValue<R extends boolean = false> = R extends true ? DateRangeFieldRootProps['defaultValue'] : DateFieldRootProps['defaultValue'];
 type InputDateModelValue<R extends boolean = false> = (R extends true ? DateRangeFieldRootProps['modelValue'] : DateFieldRootProps['modelValue']) | undefined;
 export interface InputDateProps<R extends boolean = false> extends UseComponentIconsProps, _DateFieldRootProps, _RangeDateFieldRootProps {

package/dist/runtime/components/InputDate.vue

@@ -48,6 +48,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 },
   isDateUnavailable: { type: Function, required: false },

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

@@ -6,8 +6,8 @@ import type { IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 import theme from '#build/ui/input-date';
 type InputDate = ComponentConfig<typeof theme, AppConfig, 'inputDate'>;
-type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
-type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale'>;
+type _DateFieldRootProps = Omit<DateFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
+type _RangeDateFieldRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir'>;
 type InputDateDefaultValue<R extends boolean = false> = R extends true ? DateRangeFieldRootProps['defaultValue'] : DateFieldRootProps['defaultValue'];
 type InputDateModelValue<R extends boolean = false> = (R extends true ? DateRangeFieldRootProps['modelValue'] : DateFieldRootProps['modelValue']) | undefined;
 export interface InputDateProps<R extends boolean = false> extends UseComponentIconsProps, _DateFieldRootProps, _RangeDateFieldRootProps {

package/dist/runtime/components/InputMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-menu";
 </script>
 
 <script setup>
-import { computed, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from "vue";
+import { computed, ref, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { Combobox, Autocomplete } from "reka-ui/namespaced";
@@ -228,7 +228,9 @@ function onFocus(event) {
   emits("focus", event);
   emitFormFocus();
 }
+const isOpen = ref(false);
 function onUpdateOpen(value) {
+  isOpen.value = value;
   let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
@@ -283,6 +285,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({
   inputRef: toRef(() => inputRef.value?.$el),
   viewportRef: toRef(() => viewportRef.value)
@@ -361,6 +371,7 @@ defineExpose({
   </DefineItemTemplate>
 
   <Component.Root
+    ref="comboboxRootRef"
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
     :name="name"

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

@@ -49,7 +49,8 @@ const _props = defineProps({
   disableWheelChange: { type: Boolean, required: false },
   invertWheelChange: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  focusOnChange: { type: Boolean, required: false }
+  focusOnChange: { type: Boolean, required: false },
+  locale: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
@@ -57,7 +58,7 @@ const props = useComponentProps("inputNumber", _props);
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange", "locale"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);

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/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/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";
@@ -199,7 +199,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 +248,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)
@@ -325,6 +335,7 @@ defineExpose({
 
   <ComboboxRoot
     :id="id"
+    ref="comboboxRootRef"
     v-slot="{ modelValue, open }"
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     ignore-filter

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

@@ -6,7 +6,7 @@ import type { AvatarProps, ButtonProps, IconProps, ProgressProps, LinkPropsKeys
 import type { StringOrVNode } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>;
-export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
+export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'li'
@@ -47,6 +47,13 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
      * `{ size: 'xs' }`{lang="ts-type"}
      */
     actions?: ButtonProps[];
+    /**
+     * The time in milliseconds before the toast automatically closes. Overrides the global `toaster.duration`.
+     *
+     * Set to `0` to keep the toast open until it's manually closed.
+     * @defaultValue 5000
+     */
+    duration?: number;
     /**
      * Display a progress bar showing the toast's remaining duration.
      * `{ size: 'sm' }`{lang="ts-type"}

package/dist/runtime/components/Toast.vue

@@ -26,13 +26,13 @@ const _props = defineProps({
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: null, required: false },
   actions: { type: Array, required: false },
+  duration: { type: Number, required: false },
   progress: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
-  type: { type: String, required: false },
-  duration: { type: Number, required: false }
+  type: { type: String, required: false }
 });
 const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "swipeMove", "swipeCancel", "swipeEnd", "update:open"]);
 const slots = defineSlots();
@@ -61,7 +61,7 @@ defineExpose({
 <template>
   <ToastRoot
     ref="rootRef"
-    v-slot="{ remaining, duration, open }"
+    v-slot="{ remaining, duration: totalDuration, open }"
     v-bind="rootProps"
     :data-orientation="props.orientation"
     data-slot="root"
@@ -129,8 +129,8 @@ defineExpose({
     </div>
 
     <UProgress
-      v-if="props.progress && open && remaining > 0 && duration"
-      :model-value="remaining / duration * 100"
+      v-if="props.progress && open && remaining > 0 && totalDuration"
+      :model-value="remaining / totalDuration * 100"
       :color="props.color"
       v-bind="typeof props.progress === 'object' ? props.progress : {}"
       size="sm"

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

@@ -6,7 +6,7 @@ import type { AvatarProps, ButtonProps, IconProps, ProgressProps, LinkPropsKeys
 import type { StringOrVNode } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>;
-export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
+export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'li'
@@ -47,6 +47,13 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
      * `{ size: 'xs' }`{lang="ts-type"}
      */
     actions?: ButtonProps[];
+    /**
+     * The time in milliseconds before the toast automatically closes. Overrides the global `toaster.duration`.
+     *
+     * Set to `0` to keep the toast open until it's manually closed.
+     * @defaultValue 5000
+     */
+    duration?: number;
     /**
      * Display a progress bar showing the toast's remaining duration.
      * `{ size: 'sm' }`{lang="ts-type"}

package/dist/shared/{ui.BzjkAvk7.mjs → ui.C-lVg1QQ.mjs}

@@ -8326,7 +8326,7 @@ type AppConfigUI = {
   tv?: typeof defaultConfig
 } & TVConfig<typeof ui>
 
-type AppConfigRuntimeUI = DeepRequired<Pick<AppConfigUI, 'colors' | 'icons' | 'tv'>> & Omit<AppConfigUI, 'colors' | 'icons' | 'tv'>
+type AppConfigRuntimeUI = DeepRequired<Pick<AppConfigUI, 'colors' | 'icons' | 'tv'>> & typeof ui
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
@@ -8336,7 +8336,7 @@ declare module '@nuxt/schema' {
      */
     ui?: AppConfigUI
   }
-  interface AppConfig {
+  interface CustomAppConfig {
     ui: AppConfigRuntimeUI
   }
 }

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { b as getTemplates, p as publicComposables, d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.BzjkAvk7.mjs';
+import { b as getTemplates, p as publicComposables, d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.C-lVg1QQ.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import MagicString from 'magic-string';

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.BzjkAvk7.mjs';
+import './shared/ui.C-lVg1QQ.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import 'knitwork';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "4.8.1",
-  "packageManager": "pnpm@11.3.0",
+  "version": "4.8.2",
+  "packageManager": "pnpm@11.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -129,35 +129,35 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
     "@iconify/vue": "^5.0.1",
-    "@internationalized/date": "^3.12.1",
-    "@internationalized/number": "^3.6.6",
+    "@internationalized/date": "^3.12.2",
+    "@internationalized/number": "^3.6.7",
     "@nuxt/fonts": "^0.14.0",
     "@nuxt/icon": "^2.2.2",
-    "@nuxt/kit": "^4.4.6",
-    "@nuxt/schema": "^4.4.6",
+    "@nuxt/kit": "^4.4.7",
+    "@nuxt/schema": "^4.4.7",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.1.0",
     "@tailwindcss/postcss": "^4.3.0",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/vue-table": "^8.21.3",
-    "@tanstack/vue-virtual": "^3.13.25",
-    "@tiptap/core": "^3.23.6",
-    "@tiptap/extension-bubble-menu": "^3.23.6",
-    "@tiptap/extension-code": "^3.23.6",
-    "@tiptap/extension-collaboration": "^3.23.6",
-    "@tiptap/extension-drag-handle": "^3.23.6",
-    "@tiptap/extension-drag-handle-vue-3": "^3.23.6",
-    "@tiptap/extension-floating-menu": "^3.23.6",
-    "@tiptap/extension-horizontal-rule": "^3.23.6",
-    "@tiptap/extension-image": "^3.23.6",
-    "@tiptap/extension-mention": "^3.23.6",
-    "@tiptap/extension-node-range": "^3.23.6",
-    "@tiptap/extension-placeholder": "^3.23.6",
-    "@tiptap/markdown": "^3.23.6",
-    "@tiptap/pm": "^3.23.6",
-    "@tiptap/starter-kit": "^3.23.6",
-    "@tiptap/suggestion": "^3.23.6",
-    "@tiptap/vue-3": "^3.23.6",
+    "@tanstack/vue-virtual": "^3.13.26",
+    "@tiptap/core": "^3.24.0",
+    "@tiptap/extension-bubble-menu": "^3.24.0",
+    "@tiptap/extension-code": "^3.24.0",
+    "@tiptap/extension-collaboration": "^3.24.0",
+    "@tiptap/extension-drag-handle": "^3.24.0",
+    "@tiptap/extension-drag-handle-vue-3": "^3.24.0",
+    "@tiptap/extension-floating-menu": "^3.24.0",
+    "@tiptap/extension-horizontal-rule": "^3.24.0",
+    "@tiptap/extension-image": "^3.24.0",
+    "@tiptap/extension-mention": "^3.24.0",
+    "@tiptap/extension-node-range": "^3.24.0",
+    "@tiptap/extension-placeholder": "^3.24.0",
+    "@tiptap/markdown": "^3.24.0",
+    "@tiptap/pm": "^3.24.0",
+    "@tiptap/starter-kit": "^3.24.0",
+    "@tiptap/suggestion": "^3.24.0",
+    "@tiptap/vue-3": "^3.24.0",
     "@unhead/vue": "^2.1.15",
     "@vueuse/core": "^14.3.0",
     "@vueuse/integrations": "^14.3.0",
@@ -172,7 +172,7 @@
     "embla-carousel-fade": "^8.6.0",
     "embla-carousel-vue": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "fuse.js": "^7.3.0",
+    "fuse.js": "^7.4.0",
     "hookable": "^6.1.1",
     "knitwork": "^1.3.0",
     "magic-string": "^0.30.21",
@@ -180,18 +180,18 @@
     "motion-v": "^2.2.1",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.9.8",
+    "reka-ui": "2.9.9",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.3.0",
-    "tinyglobby": "^0.2.16",
+    "tinyglobby": "^0.2.17",
     "ufo": "^1.6.4",
     "unplugin": "^3.0.0",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-vue-components": "^32.1.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.3.0"
+    "vue-component-type-helpers": "^3.3.3"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^1.15.2",
@@ -201,18 +201,18 @@
     "@tanstack/table-core": "^8.21.3",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.10",
-    "ai": "^6.0.191",
+    "ai": "^6.0.193",
     "embla-carousel": "^8.6.0",
-    "eslint": "^10.4.0",
+    "eslint": "^10.4.1",
     "happy-dom": "^20.9.0",
-    "nuxt": "^4.4.6",
+    "nuxt": "^4.4.7",
     "release-it": "^19.2.4",
     "unbuild": "^3.6.1",
     "vitest": "^4.1.7",
     "vitest-axe": "^0.1.0",
-    "vitest-environment-nuxt": "^1.0.1",
-    "vue": "^3.5.34",
-    "vue-tsc": "^3.3.0"
+    "vitest-environment-nuxt": "^2.0.0",
+    "vue": "^3.5.35",
+    "vue-tsc": "^3.3.3"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7 || ^3.0.0",